리액트 심화1 - Redux Toolkit(2) - TodoList 리덕스 툴킷으로 변환

 

- 기존의 configStore

import { createStore } from "redux";
import { combineReducers } from "redux";
import todos from "../modules/todos";

// 1. create rootReducer with reducers
const rootReducer = combineReducers({
  todos,
});

// 2. create store
const store = createStore(rootReducer);

// 3. export
export default store;

 

- Redux Toolkit의 configStore

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

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

export default store;

 

 

- 기존의 todos.js

import React from "react";
import { v4 as uuidv4 } from "uuid";

// action items
const ADD_TODO = "ADD_TODO";
const REMOVE_TODO = "REMOVE_TODO";
const SWITCH_TODO = "SWITCH_TODO";

/**
 * 메서드 개요 : todo 객체를 입력받아, 기존 todolist에 더함
 * 2022.12.16 : 최초작성
 *
 * @param {todo 객체} payload
 * @returns
 */
export const addTodo = (payload) => {
   return {
     type: ADD_TODO,
     payload,
   };
};

/**
 * 메서드 개요 : todo의 id를 입력받아, 일치하는 todolist를 삭제
 * 2022.12.16 : 최초작성
 *
 * @param {todo의 id} payload
 * @returns
 */
export const removeTodo = (payload) => {
   return {
     type: REMOVE_TODO,
     payload,
   };
};

/**
 * 메서드 개요 : todo의 id를 입력받아, 일치하는 todo 아이템의 isDone을 반대로 변경
 * 2022.12.16 : 최초작성
 *
 * @param {*} payload
 * @returns
 */
export const switchTodo = (payload) => {
   return {
     type: SWITCH_TODO,
     payload,
   };
};

// initial states
const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];

// reducers
const todos = (state = initialState, action) => {
   switch (action.type) {
     case ADD_TODO: // 기존의 배열에 입력받은 객체를 더함
       return [...state, action.payload];
     case REMOVE_TODO: // 기존의 배열에서 입력받은 id의 객체를 제거(filter)
       return state.filter((item) => item.id !== action.payload);
     case SWITCH_TODO: // 기존의 배열에서 입력받은 id에 해당하는 것만 isDone을 반대로 변경(아니면 그대로 반환)
       return state.map((item) => {
         if (item.id === action.payload) {
           return { ...item, isDone: !item.isDone };
         } else {
           return item;
         }
       });
     default:
       return state;
   }
};

// export
export default todos;

 

- Redux Toolkit의 todos.js(주로 todosSlice.js라고 씀)

import { createSlice } from "@reduxjs/toolkit";
import React from "react";
import { v4 as uuidv4 } from "uuid";

// 우리가 기억해야 하는 것!
// action creatore -> action 객체를 return하는 함수
// reducer -> state와 action을 정의해놓은 함수


// initial states
const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];


// slice : reducer 함수와 action creator를 포함한 객체
const todosSlice = createSlice({
  name: "todos",
  initialState: initialState,
  reducers: {
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    removeTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
    switchTodo: (state, action) => {
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    },
  },
});

// export
export default todosSlice.reducer;
export const { addTodo, removeTodo, switchTodo } = todosSlice.actions;
// action creator를 만들지 않았지만 export를 할 수 있음 => 상당히 많은 코드를 줄임