[항해 99 주특기] 심화강의 Redux-Toolkit

리덕스 툴킷이란?

우리가 redux를 사용하면서조차도 휴먼에러를 낼 수 있는 부분이 있기에 이를 더욱 효율적이고 간단하게 쓸 수 있게 만들어 놓은 package(서드 파티 메서드)이다.

 

전체적은 구조와 패러다임은 변하지 않았기 떄문에 useSeelctor를 이용해서 state를 불러오거나 state를 저장할때 action value && create 그리고 reducer의 사용 등등 변하지 않았다.

 

---

사용법

1. 리덕스 툴킷을 설치하자

yarn add react-redux @reduxjs/toolkit

2. configStore && createSlice

- configStore

기존의 store의 생성방식은 rootReducer를 생성하고 combineReducer 메서드를 통해 modules에서 export한 reducer를 객체로 묶은 뒤 이것을 store에 createStore를 통해서 할당하는 방식으로 store를 export했는 반면에

configStore를 통해서 생성하는 이러한 방식을 통해서 로직의 길이를 줄이고 간단화 할 수 있다.

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;

 

- createSlice

기존에 action value , create, reducer를 각각 따로 생성을했던 방식은 휴먼에러를 일으킬 수 있는 요소 많다 그렇기에 createSlice를 통해서 로직의 길이를 줄이고 휴먼에러의 가능성도 줄일 수 있기에 이걸 꼭 써야할 것 같다.

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) export 한 값이 counterSlice.reducer 인데 store에 할당할 때도 counterSlice.reducer라고 쓰는지 궁금하다 

 

---

리덕스 툴킷의 특징

1. immer기능이 내장되어 있다는 것

이 기능으로 인해서 불변성을 유지해야만 state의 변화를 감지하기에 사용하지 못했던 push 등등 을 사용할 수 있는 특징이 있다.헷갈릴 수 있으니 나는 그냥 불변성 유지하는 걸로 하고 상식으로 알아놓자.

 

2. devTool 사용의 용이함

기존 redux만 사용할때에는 사용하기위해서는 여러 설정이 필요한 반면에 걍 사용하면 된다는 큰 장점(좀 더 구글링 해보자)

 

궁금증 2) Github에서 pull해온 자료에는 패키지를 새로 다운을 받아야하는데 이떄 npm i를 하란말이 뭐지?