Redux Toolkit

• Redux를 더 사용하기 쉽게 만들기 이해 Redux에서 제공하는 개발 도구
  공식 문서

☝🏻 사용하기

• 설치

yarn add @reduxjs/toolkit

• 임포트

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

Toolkit을 사용하는 이유

Redux 사용시 문제점

• 저장소 구성의 복잡성
• 많은 패키지 필요성(의존성)
• 한 작업 시 필요한 수 많은 코드양(boilerplate)

☝🏻 리덕스 사용

• 1개의 액션을 생성해도 (액션 타입 / 액션 생성 함수 / 리듀서)가 필요
• redux-actions : 많아지는 액션을 관리
• immer : 불변성 보존
• reselect : store 값을 효율적으로 핸들링해 불필요한 리렌더링을 막음
• thunk, saga : 비동기 작업

• 이처럼 리덕스를 사용하기 위해 4-5개의 라이브러리를 사용했지만 redux toolkit은 내장된 기능으로 saga를 제외한 위 모든 기능을 제공한다.

Rd

configureStore

• Redux-Toolkit의 configureStore 는 Redux 의 createStore 를 활용한 API로 reducer 필드를 필수적으로 넣어주어야 하며 default 로 redux devtool 을 제공한다.

//import { createStore } from 'redux';
//import rootReducer from './module/rootReducer';
import { configureStore } from '@reduxjs/toolkit';

// before
//const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
//const store = createStore(rootReducer, devTools);

// after
const store = configureStore({ reducer: rootReducer });

createSlice

• action, reducer를 전부 가지고 있는 Ducks 패턴

기본 형태

createSlice({
  //액션의 경로를 잡아줄 이름
    name: 'reducerName',
  //초기 state
    initialState: [],
  //acition으로 구분을 준 reducer
    reducers: {
      //action을 선언하고 해당 action이 dispatch되면 state를 가지고 action을 처리한다.
        action1(state, payload) {
            //action1 logic
        },
        action2(state, payload) {
            //action2 logic
        },
        action3(state, payload) {
            //action3 logic
        }
    }
})

특징

불변성 관리

• Redux-Toolkit는 immer 라이브러리를 내재하고 있기 때문에 createReducer 와 createSlice 함수는 이러한 불변성까지 자동으로 관리해주는 유틸을 가지고 있다.

  ☝🏻 immer?

• 우리가 불변성을 신경쓰지 않아도 불변성 관리를 알아서 대신 해주는 라이브러리

scope

• 각 action 타입마다 코드 블럭을 scope로 잡기 때문에 변수 단위로 사용이 가능하다.

적용한 예시

//initialState
const initialState = {
  list: [],
};

//리덕스
const review = createSlice({
  name: "review",
  initialState,
  reducers: {
    addReview: (state, action) => {
      const title = action.payload.title;
      const content = action.payload.content;
      state.list.push({ title, content });
    },

    getReview: (state, action) => {
      state.list = action.payload;
    },

    deleteReview: (state, action) => {
      let idx = state.list.findIndex((r) => r._id === action.payload);
      if (idx !== -1) {
        state.list.splice(idx, 1);
      }
    },

    updateReview: (state, action) => {},
  },
});

export const { addReview, getReview, deleteReview, updateReview } =
  review.actions;

export default review;