리덕스에서 사용되는 키워드

리덕스를 사용하게 될 때 접하게 될 키워드들을 알아보자. 대부분은 useReducer 를 사용할 때 접해본 개념이다.

액션 (Action)

상태에 어떠한 변화가 필요하게 될 때, 우리는 액션이란 것을 발생시킨다. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이루어져 있다.

{
  type: "TOGGLE_VALUE"
}

액션 객체는 type 필드를 필수적으로 가지고 있어야 하고, 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스를 배워보자"
  }
}

{ 
  type: "CHANGE_INPUT"
  text: "반갑습니다"

액션 생성함수 (Action Creator)

액션 생성함수는 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.

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

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

액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다. 따라서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와 사용한다.

리덕스를 사용할 때 액션 생성함수를 사용하는 것이 필수는 아니다. 액션을 발생시킬 때마다 직접 액션 객체를 작성할 수도 있다.

리듀서 (Reducer)

리듀서는 변화를 일으키는 함수이다. 리듀서는 두가지의 파라미터를 받아온다

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

리듀서는 현재의 상태(state)와, 전달받은 액션(action)을 참고하여 새로운 상태를 만들어서 반환한다. 이 리듀서는 useReducer 를 사용할 때 작성하는 리듀서와 똑같은 형태를 지닌다.

만약 카운터를 위한 리듀서를 작성한다면 다음과 같이 작성할 수 있다.

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;//새로운 상태
    case 'DECREASE':
      return state - 1;//새로운 상태
    default:
      return state;//기존 상태
  }
}

useReducer 에서는 일반적으로 default: 부분에 throw new Error('Unhandled Action') 과 같이 에러를 발생시키도록 처리하는게 일반적이지만, 리덕스의 리듀서에서는 기존 state 를 그대로 반환하도록 작성해야 한다.

리덕스를 사용할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서(Root Reducer)를 만들 수 있다. (루트 리듀서 안의 작은 리듀서들을 서브 리듀서라고 부른다.)

스토어 (Store)

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 된다. 스토어 안에는 현재의 앱 상태와 리듀서가 들어가 있고, 추가적으로 몇가지 내장 함수들이 있다.

디스패치 (dispatch)

디스패치는 스토어의 내장 함수 중 하나이다. 디스패치는 액션을 발생시키는 것 이라고 이해하면 된다. dispatch 라는 함수에는 액션을 파라미터로 전달한다. dispatch(action) 이런식으로.

구독 (subscribe)

구독 또한 스토어의 내장 함수 중 하나이다. subscribe 함수는 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때마다 전달해준 함수가 호출된다.

리액트에서 리덕스를 사용하게 될 때 보통 subscribe 함수를 직접 사용하는 일은 별로 없다. 그 대신 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector hook 을 사용하여 리덕스 스토어의 상태에 구독한다.