[Redux] action, reducer, dispatch 더 간편하게 작성하기 (createAction, bindActionCreators, handleActions)

액션 생성함수를 더 간편하게 작성하기

createAction

액션 생성함수를 보다 간편하게 작성할 수 있도록 도와주는 함수이다.

기존 액션 생성 함수

const CHANGE_INPUT = 'waiting/CHANGE_INPUT'; // 인풋 값 변경
const CREATE = 'waiting/CREATE'; // 명단에 이름 추가
const ENTER = 'waiting/ENTER'; // 입장
const LEAVE = 'waiting/LEAVE'; // 나감

// **** FSA 규칙을 따르는 액션 생성 함수 정의
export const changeInput = text => ({ type: CHANGE_INPUT, payload: text });
export const create = text => ({ type: CREATE, payload: text });
export const enter = id => ({ type: ENTER, payload: id });
export const leave = id => ({ type: LEAVE, payload: id });

액션 생성 함수는 FSA 규칙을 따른다.
필수적으로는
1. 순수 자바스크립트 객체이며
2. type 값이 있어야 한다.

선택적으로

• payload, error, meta 값이 있을 수 있다.

payload는 액션에서 사용할 파라미터를 전달해준다.
위 예시에서 create나 changeInput은 텍스트 값을 받아와야 하기 때문에 파라미터가 되는 text를 payload값으로 지정한다.

createAction 함수를 이용하면 type과 payload임을 명시해주지 않아도 된다.
첫 번째 파라미터는 type, 두 번째 파라미터는 payloadCreator로 받는다.

• 기존 액션생성함수
  export const changeInput = text => ({ type: CHANGE_INPUT, payload: text });

• createAction함수를 사용했을 때
  export const changeInput = createAction(CHANGE_INPUT, text => text);

리듀서를 더 간편하게 작성하기

handleActions

switch, case문을 사용하지 않고 각 액션 타입마다 업데이터 함수를 구현하는 방식이다.
가독성이 더 좋다고 하는데 잘 모르겠다.

export default handleActions(
  {
    [CHANGE_INPUT]: (state, action) => ({
      ...state,
      input: action.payload,
    }),
    [CREATE]: (state, action) => ({
      ...state,
      list: state.list.concat({
        id: action.payload.id,
        name: action.payload.text,
        entered: false,
      }),
    }),
    [ENTER]: (state, action) => ({
      ...state,
      list: state.list.map(
        item =>
          item.id === action.payload
            ? { ...item, entered: !item.entered }
            : item
      ),
    }),
    [LEAVE]: (state, action) => ({
      ...state,
      list: state.list.filter(item => item.id !== action.payload),
    }),
  },
  initialState
);

dispatch: mapDispatchToProps 더 간편하게 하기

bindActionCreators

기존

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement()),
});

bindActionCreators

const mapDispatchToProps = dispatch =>
  bindActionCreators({ increment, decrement }, dispatch); // **** (2) bindActionCreators 사용.

Reference

• https://velog.io/@velopert/Redux-3-%EB%A6%AC%EB%8D%95%EC%8A%A4%EB%A5%BC-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-nvjltahf5e