[Redux Toolkit] createAction

본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다.

 

Redux Toolkit

사람들은 Redux를 사용할 때 많은 코드를 적어야 하는 것이 불편하다고 느꼈고,

이에 보완책으로 나온 것이 Redux Toolkit이다. 

즉, Redux Toolkit은 더 적은 코드로  Redux와 같은 일을 행하게 해주는 Package이다.

 

npm install @reduxjs/toolkit

 

createAction

---

const ADD = "ADD";
const DELETE = "DELETE";

const addToDo = (text) => {
  return {
    type: ADD,
    text,
  };
};

const deleteToDo = (id) => {
  return {
    type: DELETE,
    id,
  };
};

---

 

reducer 전에 위치한 addToDo, deleteToDo와 같은 함수를 Action Creator라고 칭하고

action object를 만들어서 return 해주는 용도로 사용한다고 하였다.

이 Action Creator를 간소화 하는 것이 createAction이다.

 

 

import { createAction } from "@reduxjs/toolkit";

const addToDo = createAction("ADD");
const deleteToDo = createAction("DELETE");

 

createAction으로 만들어진 addToDo와 deleteToDo는 function이고 실행 시 Object를 return한다.

 

return Object

Object는 type과 payload 속성을 가진다.

 

• type (String) : "ADD"와 같은 action 타입 설명
• payload : action에 type과 함께 보내지는 기타 파라미터

const reducer = (state = [], action) => {
  switch (action.type) {
    case addToDo.type:
      console.log(action);
      return [{ text: action.payload, id: Date.now() }, ...state];
    case deleteToDo.type:
      return state.filter((toDo) => toDo.id !== action.payload);
    default:
      return state;
  }
};

 

createAction을 사용함으로서 바뀐 reducer 코드이다.

 

• case "ADD" -> case addToDo.type    | type을 읽어올 때 addToDo.type 사용
• action.id -> action.payload               | action에서 기타 파라미터값을 읽어올 때 payload 읽음.