Redux Toolkit

Redux Toolkit 이란?

1. configureStore(): Redux Toolkit은 configureStore라는 함수를 제공하여 간단하게 Redux 스토어를 설정할 수 있다. 이 함수는 여러 가지 기능을 기본적으로 설정해주므로 개발자가 따로 설정을 하지 않아도 된다.

2. createSlice(): 리덕스 액션과 리듀서를 하나의 파일에서 정의할 수 있는 createSlice 함수를 제공한다. 이를 통해 코드의 일관성을 유지하고 간결하게 리듀서를 작성할 수 있다.

3. immer 라이브러리 통합: 리덕스 툴킷은 내부적으로 immer 라이브러리를 사용하여 불변성을 유지하는 작업을 간소화한다. 이를 통해 복잡한 불변성 코드를 작성하지 않아도 상태를 쉽게 수정할 수 있다.

4. Redux DevTools Extension 통합: 개발자 도구에서 Redux DevTools Extension을 쉽게 사용할 수 있도록 통합되어 있는데 이를 통해 상태 변화를 모니터링하고 디버깅하기가 용이해진다.

yarn을 이용한 패키지 설치법

• yarn add react-redux @reduxjs/toolkit

기존의 Redux와 코드비교

강의 자료를 이용해서 비교했다.

기존의 Redux 코드

// 일반 리덕스 예시 코드

// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload,
  };
};

export const minusNumber = (payload) => {
  return {
    type: MINUS_NUMBER,
    payload,
  };
};

// Initial State
const initialState = {
  number: 0,
};

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    // [퀴즈 답]
    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

// export default reducer
export default counter;

Redux Toolkit 코드

// src/redux/modules/counterSlice.js

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

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

차이점

1. 액션 및 리듀서의 통합: Redux Toolkit을 사용한 코드에서는 createSlice 함수를 통해 액션과 리듀서를 한 번에 정의한다.

2. immer 라이브러리 통합: Redux Toolkit 코드에서는 immer 라이브러리를 내부적으로 사용하므로 불변성을 유지하면서도 상태를 수정하는 코드가 더 간단하다.

3. 액션 크리에이터와 리듀서의 export 편의성: Redux Toolkit 코드에서는 액션 크리에이터와 리듀서를 간단하게 한 줄로 export할 수 있다.

4. DevTools 통합 및 초기 설정 간소화: Redux Toolkit은 DevTools 통합이 내장되어 있으며, configureStore 함수를 사용하여 초기 스토어 설정 간소화 가능.

마무리

아직 Redux의 이해도가 많이 모자른 상황이라 꾸준한 복습이 느껴지는 순간이였다. 모르는 부분도 많아서 구글링을 많이 한거같음.