[Redux] Redux Toolkit 사용하기

🎈 Redux Toolkit

🔰 사용이유

Redux의 환경 설정이 복잡함
보일러 플레이트 최소화

🔰 설치

$ npm install @reduxjs/toolkit
$ yarn add @reduxjs/toolkit
$ npm install --save-dev redux-devtools

🎈 1. configureStore

스토어 생성하기

/* 📄 src/index.js */

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from "../reducers/index";

const store = configureStore({
  reducer: rootReducer,
  middleware: 미들웨어,
  devTools: 개발자도구여부 (true/false),
  preloadedState: 스토어초기값,
  enchaner: 
  등등..
});

export default store;

• reducer
  • store의 rootReducer를 설정
  • 일반 슬라이스로 설정한 경우 자동으로 combineReducers에 전달되고 rootReducer로 설정됨
• middleware
  • redux-logger와 같은 리덕스 미들웨어 설정
  • 미들웨어를 설정한 경우 applyMiddleware에 전달
  • 미들웨어를 설정하지 않은 경우 getDefaultMiddleware를 호출
• devTools
  • Redux DevTools 사용 여부 true/false
• preloadedState
  • 리덕스 스토어의 초기값 설정
• enhancers
  • 사용자 정의 미들웨어
  • 콜백 함수로 설정하면 미들웨어 적용 순서 지정 가능

🔰 미들웨어란?

디스패치된 액션이 리듀서에 도달하기 전, 중간 영역에서 원하는 기능을 수행할 수 있게 해준다.

🎈 2. createSlice

슬라이스를 이용하면 리듀서와 액션을 한번에 작성할 수 있다.

🔰 형식

const loginSlice = createSlice({
  name: "상태이름",
  initialState: 초기값,
  reducers: {
    리듀서A: (state, action) => {
      state.키 = action.payload.키;
    },

    리듀서B: (state) => {
      state.키 = 값;
    },
    
    ...

  },
});
  
export const { 리듀서A, 리듀서B } = 슬라이스이름.actions;
export default 슬라이스이름.reducer;

🔰 예시 : 로그인 토큰을 저장/삭제

/* 📄 src/reducers/loginSlice.js */

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

export const loginSlice = createSlice({
  name: "login",
  initialState: {
    token: "",
  },
  reducers: {
    setUserReducer: (state, action) => {
      state.token = action.payload.token;
    },

    clearUserReducer: (state) => {
      state.token = "";
    },
  },
});

export const { setUserReducer, clearUserReducer } = loginSlice.actions;
export default loginSlice.reducer;

🔰 만든 슬라이스를 rootReducer에 묶기

/* 📄 src/reducers/index.js */
import { loginSlice } from "./loginSlice";

const rootReducer = combineReducers({
  login: loginSlice.reducer,
});

🎈 createAsyncThunk