[React] Redux Toolkit 사용법

 

Redux Toolkit Store 

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

import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

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

export default store;

 

이전에는 

const rootReducer = combineReducers({counter,});
const store = createStore(rootReducer);

 

createStore와 combineReducers 를 사용했어야 하지만

툴킷에선 configureStore 하나만 사용해주면 된다.

 

 

 

 

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;

 

이전 코드는 액션 객체와 하드코딩을 방지하기 위한 타입의 변수 선언 등

코드가 길어졌었으나 툴킷을 사용하게 되면

createSlice 를 통해 위의 모든 과정 없이 리듀서를 export 할 수 있게된다

 

createSlice 는 객체를 인자로 받고

객체에서 3개의 입력값을 받는다.

(1) name : 

(2) initialState :

(3) reducers : 여기서 객체를 만들어 여러개의 리듀서 함수를 만들 수 있다.

 

* 추가로 리덕스 툴킷 안에는 immer 라는 기능이 있어서

push 같은 불변성이 유지되지 않는 메서드를 사용해도

웹 상에서 State가 변경되며 동작하게 된다.