리덕스 모듈이란 다음항목이 모두 들어있는 자바스크립트파일을 말한다. (액션/액션 생성함수/리듀서) -> 이것을 한 파일에 모은것을 덕스(ducks)패턴이라고한다.

리듀서는 export default로 선언하고 액션함수는 export 함수로 선언하게 된다.

액션 (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;
}

리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다. 이 리듀서는 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함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을때마다 전달해준 함수가 호출된다.

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