[React] Redux Toolkit

Redux Toolkit

리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로, 코드는 더 적게, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것.

우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같음.

 

리덕스 툴킷 설치 명령어

yarn add @reduxjs/toolkit

 

 

 

1. configStore.js 설정

 

순수 redux configStore.js

const rootReducer = combineReducers({
  counter, // 리듀서 모음
});
const store = createStore(rootReducer);

 

redux toolkit

const store = configureStore({
  reducer: {
    counter: counter,
  }
})

 

---

2. redux toolkit 설치 이후, createSlice 를 import

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

 

3. redux toolkit 으로 action creator 와 reducer 를 한번에 가져올 수 있음.

 

initialState 는 그대로 작성

const initialState = {
  number: 0,
};

 

기존의 action creator 와 reducer 를 각각 작성했던 방법과 달리, 

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

export const plusNumber = (payload) => {
  return {
    type: PLUS_NUMBER,
    payload,
  };
};

// reducer : 함수
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_NUMBER:
      return {
        number: state.number + action.payload,
      };
    case MINUS_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

 

 

다음과 같이 한번에 정리해서 사용할 수 있음.

// action creator, reducer 둘 다 들어있음
const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: { // 리듀서는 객체 형태로 여러개 작성
    plusNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

export default counterSlice.reducer; // 리듀서 export
export const { plusNumber, minusNumber } = counterSlice.actions; // actions import