수정 전 코드

🫧 패키지 설치

yarn add @reduxjs/toolkit react-redux

코드 수정

📁 redux / config / configStore.js

🔻 수정 전

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;

🔻수정 후

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

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

export default store;

📁 redux / modules / todos.js

• modules에서 내보낸게 무엇인지 기억해야한다.
  • action value
  • action creator
  • action reducer
• creatSlice 를 사용하여 위 3개를 한 번에 작성한다.

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


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

const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.push(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 const {addTodo, removeTodo, switchTodo} = todosSlice.actions;
export default todosSlice.reducer;

• react에서 렌더링을 발생시키기 위해서 불변성을 유지시켜야한다.
  • 새로운 배열 return [...state, action.payload]
  • redux toolkit 안에 immer 라는 기능이 내장되어 있기 때문에 push 쓸 수 있음
  • state.push(action.payload) 사용 가능