예제로 알아보는 Redux 사용법 (1) Redux toolkit

기존의 리덕스는 왜 안쓰고
Redux toolkit을 사용하는 걸까요????

 

왜 리덕스 툴킷을  사용할까요?

 

리덕스 대신에 리덕스 툴킷을 사용하는 이유는 무엇일까요 ? 저는 이 이유를 리덕스 툴킷 공식문서에 가져왔습니다. 

 

   저 또한  리덕스를 사용하면서  react-redux , redux  패키지를 설치해야되고 , 리덕스에서 액션 변수와 같은 상용구도 

   지금은  2개인데  10개 , 100개 , 1000개되면  상용구 코드가 많이 필요하게 되어서  간편화된 리덕스 툴킷이 좋습니다.

---

 

1.  리덕스 툴킷으로 만든 전역 상태관리 저장소

  

combineReducer >>> createStore 의 과정이  간소화해졌습니다.  

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

import modalReducer from "../module/modalSlice";

export const store = configureStore({ reducer: modalReducer });

 

2. 리덕스 툴킷으로 만든 모듈 파일

 

기존 리덕스로 만들었을때  초기값, 액션변수, 액션함수, 리듀서가 있었습니다. 이것 createSlice하나로 간소화하였습니다.

// 초기값
const initialState = {
  isModalState: false,
};

const modalSlice = createSlice({
  name: "modal",
  initialState,
  reducers: {
    open(state) {
      state.isModalState = true;
    },
    close(state) {
      state.isModalState = false;
    },
  },
});

 

3.  useSelector , useDispatch 부분은 전작과 동일합니다. 

 

---

제가 말하고 싶은 것은
리덕스 툴킷은  리덕스의 핵심 코어를 가져가면서
기존 리덕스 사용자의  불편함을 줄여주었다
라고 말씀 드리고 싶습니다.