[Redux] Redux에 사용되는 키워드 알아보기!

Redux 란?

리덕스란 공식문서에서는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.라고 설명을 합니다.
조금 쉽게 설명을 덧붙여 보자면 리덕스는 복잡한 state 관리를 중앙집권화하여 단순하게 처리할 수 있게
도와주는 자바스크립트 라이브러리입니다.

Redux를 구성하는 키워드

• 스토어 (Store)
• 액션 (Action)
• 디스패치 (dispatch)
• 리듀서 (Reducer)
• 구독 (subscribe)

1. 스토어 (Store)

리덕스에서는 하나의 스토어를 만들게 되고, 그 스토어 안에 현재의 state와, 리듀서를 주입해줍니다.
그리고 스토어에는 추가적으로 몇가지 내장 함수들이 있기도 합니다.
스토어의 상태를 바꾸는 것이 리덕스의 핵심입니다.

2. 액션 (Action)

state에 어떠한 변화가 필요하게 될 땐, 액션이란 것을 발생시킵니다.
이는 하나의 객체로 표현되며, 액션 객체는 다음과 같은 형식으로 이뤄져있습니다.

{
  type: "TOGGLE_VALUE"
  // 액션 객체는 type을 필수적으로 가지고 있어야하고, 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.
}

예시

{
  type:'CHANGE_COLOR',
  color: 'red'
}

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

액션은 액션 생성 함수를 만들어서 사용하기도 합니다.
이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이며,
액션 생성 함수는 필수적으로 사용해야 하는 것은 아닙니다.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

3. 디스패치 (Dispatch)

디스패치는 스토어의 내장함수 중 하나입니다.
디스패치는 발생한 액션을 리듀서에 전달을 해준다고 이해하면 됩니다.
그렇게 전달을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면
액션을 참고하여 새로운 상태를 만들어 주는 것 입니다.

dispatch(action)

4. 리듀서 (Reducer)

리듀서는 기존의 있었던 state와 디스패치로 전달받은 액션의 state 값을 참조해서
새로운 state 값을 만들어 반환하는 것이 리듀서의 역할입니다.
리듀서는 따라서 기존의 state 값과 액션 값을 인자로 받습니다.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

5. 구독 (subscribe)

구독 또한 스토어의 내장함수 중 하나입니다.
스토어에 있는 state값이 디스패치 액션으로 값이 변경이 될 때,
변화하는 값을 업데이트 해주는 함수입니다.
subscribe 함수는, 함수 형태의 값을 파라미터로 받으며,
특정 함수를 전달해주면, 액션이 디스패치 될 때 마다 전달해준 함수가 다시 호출이 되는 방식입니다.

참고

Redux - 공식문서
1. 리덕스에서 사용되는 키워드 숙지하기
생활코딩 - Redux