RTK - Redux Toolkit

RTK

리덕스를 개량한 것

ducks 패턴이 오히려 전체적인 코드의 양을 늘리는 것을 개선하기 위해 만든 모듈

 

설치

yarn add @reduxjs/toolkit

 

Redux -> RTK

Redux

// action value
const ADD_TODO = "ADD_TODO";

// action creator
export const addTodo = (payload) => {
  return { type: ADD_TODO, payload };
};

 

RTK

redux 사용을 위해 만들었던 modules라는 폴더는 컨벤션상 잘 쓰이지 않음

대신 redux > slices > todoSlice.js 의 형태로 쓰인다

 

1) initialState 선언

 

2) createSlice()

- 객체를 매개변수로 받음

- 객체에는 name, initialState, reducers가 들어옴

 

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

const initialState = [
  { id: 1, title: "react 배우기", isDone: false },
  { id: 2, title: "redux 실습", isDone: false },
];

const todoSlice = createSlice({
  name: "todo",
  initialState: initialState,
  reducers: {
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    deleteTodo: (state, action) => {
      return state.filter((todo) => todo.id !== action.payload);
    },
    completeTodo: (state, action) => {
      return state.map((todo) => {
        return todo.id === action.payload.id ? { ...todo, isDone: true } : todo;
      });
    },
  },
});

export const { addTodo, deleteTodo, completeTodo } = todoSlice.actions;
export default todoSlice.reducer;

 

3) configStore.js 수정

import { configureStore } from "@reduxjs/toolkit";
import todoSlice from "../slices/todoSlice";

const store = configureStore({
  reducer: {
    todo: todoSlice,
  },
});

export default store;

 

4) 사용하는 컴포넌트에서 리듀서 사용할 수 있게 수정

- reducer들을 import해서 dispatch에 사용하는 것은 동일함