[e3] Redux Toolkit 101

1. RTK 설치하기

sudo yarn add react-redux @reduxjs/toolkit

2. Vanilla Redux의 modules 구조

// action.js
export const ADD = "ADD";
export const DELETE = "DELETE";
export const DONE = "DONE";
export const DETAIL = "DETAIL";

export const add_todo = (todo) => {
  return {
    type: ADD,
    todo: {
      id: todo.id,
      title: todo.title,
      value: todo.value,
      isDone: todo.isDone,
    },
  };
};

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

export const done_todo = (id) => {
  return {
    type: DONE,
    id,
  };
};

export const detail_todo = (todo) => {
  return {
    type: DETAIL,
    todo: {
      id: todo.id,
      title: todo.title,
      value: todo.value,
    },
  };
};
// reducer.js
import { ADD, DELETE, DONE, DETAIL } from "./actions";
const initState = {
  todos: [],
  detailTodos: {},
};

export const reducer = (state = initState, action) => {
  switch (action.type) {
    case ADD:
      return { ...state, todos: [...state.todos, action.todo] };
    case DELETE:
      return {
        todos: [...state.todos.filter((todo) => todo.id !== action.id)],
      };
    case DONE:
      return {
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, isDone: !todo.isDone } : todo
        ),
        detailTodos: action.todo,
      };
    case DETAIL:
      return {
        todos: [...state.todos],
        detailTodos: action.todo,
      };
    default:
      return state;
  }
};
export default reducer;

3. RTK의 module 구조

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

const initState = {
  todos: [],
  detailTodos: {},
};

const todoSlice = createSlice({
  name: "todolist",
  initialState: initState,
  reducers: {
    addTodo: (state, action) => {
      return { ...state, todos: [...state.todos, action.todo] };
    },
    deleteTodo: (state, action) => {
      return {
        todos: [...state.todos.filter((todo) => todo.id !== action.id)],
      };
    },
    doneTodo: (state, action) => {
      return {
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, isDone: !todo.isDone } : todo
        ),
        detailTodos: action.todo,
      };
    },
    todoDetail: (state, action) => {
      return {
        todos: [...state.todos],
        detailTodos: action.todo,
      };
    },
  },
});
export const {addTodo, deleteTodo, doneTodo, todoDetail} = counterSlice.actions;
export default todoSlice.reducer;

• RTK의 가장 큰 의의는, action value와 action create, reuducer를 한 스코프 내에 작성할 수 있다는 점이다.
• 이 모든건 Slice라는 RTK 내부 API의 힘이다.
• RTK로 기존 Redux 프로젝트를 리팩토링할 경우, Store에 약간의 변경이 필요하다.

4. Store.js

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

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