[Redux Toolkit] Redux를 좀 더 간편하게, Redux Toolkit (1) - createAction

이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. Redux에 대해 잘 모른다면 아래 글을 참고하면 좋을 듯!

[Redux] Vanilla Redux의 기본 개념

 

또한 이전 글에서 다뤘던 TodoList 코드를 가지고 진행되니 React Redux (1), (2) 먼저 보고 오길 바란다.

[React Redux] React에서 Redux를 사용해보자(1)

---

npm install @reduxjs/toolkit

yarn add @reduxjs/toolkit

 

Redux는 상태 관리를 효율적으로 할 수 있다는 점에서 분명 좋은 라이브러리이다. 그러나 사용하기까지 상당한 보일러플레이트 코드를 작성해야 한다는 단점이 있다. 따라서 보다 편하게 Redux를 사용하기 위해서 Redux Toolkit이라는 좋은 라이브러리를 제공한다. Redux Toolkit에 대해 간단하게 다뤄볼 텐데 이 글은 그 중에서도 Action을 편하게 생성할 수 있는 createAction에 대해서 다뤄보겠다.

---

createAction

이름 그대로 Action을 만들어 주는 역할을 한다. TodoList 코드를 기준으로 보면 기존의 Action을 생성하는 방법은 아래와 같다.

const ADD = 'ADD'
const DELETE = 'DELETE'

//할 일 추가는 text가 필요하다.
const addTodo = (text) => {
  return { type: ADD, text }
}

//할 일 삭제는 해당 할 일의 id를 이용하여 찾아낸 후 삭제한다.
const deleteTodo = (id) => {
  return { type: DELETE, id }
}

 

이를 createAction을 사용하면 아래와 같이 매우 편리하게 작성할 수 있다.

import { createAction } from '@reduxjs/toolkit'

const addTodo = createAction('ADD')
const deleteTodo = createAction('DELETE')

한 Action당 한 줄로 끝내버릴 수 있다. createAction 내에 들어가는 인자는 Action의 type이다. 따라서 해당 type을 가지는 Action을 간단히 생성할 수 있다. 

그러면 addTodo의 text와 deleteTodo의 id는?

createAction은 Action이 받아온 데이터를 payload라는 이름으로 통일한다. 따라서 action.text가 아닌 action.payload라고 써야 한다. 그러면 reducer를 리팩토링할 수 있는데 먼저 기존의 reducer를 보자.

const reducer = (state = [], action) => {
  switch (action.type) {
    //각 할 일 별로 id를 부여함
    case ADD:
      return [...state, { text: action.text, id: Date.now() }]

    //filter함수를 사용하여 받은 id의 할 일을 제외하고 나머지를 리턴 -> 받은 id의 할 일만 빠진다.
    case DELETE:
      return state.filter((e) => e.id !== action.id)
    default:
      return state
  }
}

 

위 코드를 아래와 같이 바꿀 수 있다.

const reducer = (state = [], action) => {
  switch (action.type) {
    //각 할 일 별로 id를 부여함
    case addTodo.type:
      return [...state, { text: action.payload, id: Date.now() }]

    //filter함수를 사용하여 받은 id의 할 일을 제외하고 나머지를 리턴 -> 받은 id의 할 일만 빠진다.
    case deleteTodo.type:
      return state.filter((e) => e.id !== action.payload)
    default:
      return state
  }
}