3.1 Redux Toolkit 개념

3.1.1 Redux Toolkit

// 액션 타입 정의
const INCREMENT = "INCREMENT";

// 액션 생성자 함수 정의
function increment() {
  return { type: INCREMENT };
}

// 초기 상태 정의
const initialState = {
  count: 0,
};

// 리듀서 함수 정의
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

// 스토어 생성
const store = createStore(counterReducer);

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

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;

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

3.1.2 리덕스 툴킷의 주요 구성요소

1) configureStore

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "./auth";
import counterReducer from "./counter";
import { logger } from "redux-logger"; //logger 사용 패키지

const store = configureStore({
  reducer: { auth: authReducer, counter: counterReducer },

  //선택 옵션들(middleware, devtools, preloadedState 등)
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger), //미들웨어 목록
  devTools: process.env.NODE_ENV !== "production", // 리덕스 개발자 도구 on/off
  preloadedState: {
    counter: 0,
    auth: { isAuthenticated: false },
  }, //리듀서 초기 상태 값 지정
});
export default store;

• thunk : 비동기 작업을 처리하기 위한 미들웨어이며, 액션 생성자가 객체 대신 함수를 반환할 수 있게 합니다.

• imnutable-state-invariant : 리덕스의 원칙 중 하나인 상태는 읽기 전용인데, 리듀서가 상태를 직접 수정하려고 하면 에러를 출력해 줍니다.

• serializable-state-invariant : 액션과 상태의 값이 직렬화 가능한지 검사합니다. 직렬화가 가능하면 리덕스 개발자 도구는 액션과 상태 변화를 기록하여 시간 여행 디버깅을 지원하게 됩니다.

2) createSlice

• name : 해당 slice 상태의 식별자에 대해 문자열로 정의합니다. 중복된 값을 정의해서는 안 되며 고유한 값을 지정해 주어야 합니다.

• initialState : 이 상태의 초기값에 대해서 할당을 해줍니다.

• reducers : 상태를 변경하는 액션 함수를 정의합니다. toolkit에서 함수 내부에 받는 파라미터엔 상태 값을 불러오는 state와 전달받은 값을 처리하는 action.payload가 있습니다. 리덕스에서는 action의 타입에 따라 액션 함수를 불러와서 상태에 대한 불변성 처리를 했지만 toolkit에서는 함수 하나만 정의하는 것으로 해결할 수 있습니다.

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

const counterReducer = createSlice({
  // 식별자 name, initialState, 리듀서 함수 reducers를 key값으로 받기
  name: "todoReducer",
  initialState: [{ id: 0, todo: "todo", isDone: false }],
  reducers: {
    // 리듀서 함수
    // Immer를 통해 원본 상태를 복사하지 않고 상태를 수정
    addTodo(state, action) {
      state.push(action.payload);
    },
    toggleTodo(state, action) {
      const toggleTodo = state.find((todo) => todo.id === action.payload);
      if (toggleTodo) toggleTodo.isDone = !toggleTodo.isDone;
    },
    deleteTodo(state, action) {
      state - state.filter((todo) => todo.id !== action.payload);
    },
  },
});