Redux Toolkit

공식 문서 참조

설치 명령어

yarn add @reduxjs/toolkit

store.js

1. createAction

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

export const addToDo = createAction("ADD");
export const deleteToDo = createAction("DELETE");

2. createReducer

const reducer = createReducer([], {
  [addToDo]: (state, action) => {
    state.unshift({ text: action.payload.text, id: action.payload.id });
    // localStorage.setItem("toDos", JSON.stringify(state));
  },
  [deleteToDo]: (state, action) => {
    state.filter((toDo) => toDo.id !== action.payload);
    // localStorage.setItem("toDos", JSON.stringify(state));
  },
});

3. createSlice
   Redux Toolkit에서 createSlice 함수를 사용하면 특정 액션 유형에 해당하는 리듀서 함수 집합을 정의할 수 있습니다. 모든 가능한 액션을 처리하기 위해 대규모 switch 문을 작성하는 대신, 액션 유형을 case 리듀서 함수에 매핑하는 룩업 테이블을 제공할 수 있습니다. 이렇게 하면 코드를 보다 조직화하고 읽기 쉽게 만들 수 있습니다. 또한, createSlice 함수는 immer 라이브러리를 자동으로 사용하여 불변 상태를 간단하게 업데이트할 수 있는 코드를 작성할 수 있게 해줍니다. immer를 사용하면 직접 상태를 변경하는 것처럼 보이는 코드를 작성할 수 있지만, 실제로는 새로운 불변 상태를 생성합니다. 예를 들어, state.todos[3].completed = true와 같은 코드를 작성할 수 있으며, immer가 자동으로 새로운 불변 상태를 생성하고 업데이트된 값을 처리합니다. 이렇게 하면 코드가 더 간결하고 이해하기 쉬워지면서도 불변 상태의 이점을 유지할 수 있습니다.

4. configureStore

const store = configureStore({ reducer });
export default store;