[React] React Redux_02 (Redux Toolkit)

앞의 글에서 리덕스에 대해서 자세히 살펴봤고, 이해했었다.

하지만, 마지막에 말했듯이 굳이 Context 대신 Redux를 사용해야할 이유를 찾지 못했었다.

 

이러한 고민을 한번에 해결해주는 것이 Redux Toolkit이다.

 

이 글에서 알아볼 것

• Redux Toolkit 이란?
• Redux Toolkit 사용법

 

1. Redux Toolkit 이란?

• Redux를 도와주는 써드파티 패키지이다.
• 뭘 도와준다는 것일까?
  • 상태 변경 불가성 문제를 해결해준다
  • 복잡한 상태 관리를 도와준다
  • 몇몇 기능들을 더 직관적이고, 쉽게 사용하도록 도롸준다

 

2. Redux Toolkit 사용법

1. 기존에 설치되어있는 redux를 삭제

• 왜냐하면 리덕스 툴킷에 리덕스가 포함되어있다.

2. npm install @reduxjs/toolkit

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

• createSlice는 기존 리덕스에서의 리듀서함수와 비슷한 기능을 한다

4. createSlice()는 인자로 객체를 받는다.

• 해당 객체에는 전역상태의 slice를 사전 정의한다
• 해당 slice 객체에는 name, initialState, reducers 프로퍼티가 필요하다
  • 여기서 reducers는 객체고, 그 객체에는 함수를 여러개 정의할수있다.
  • 여거시 정의한 함수는 첫번째 인자로 최신 state를 받고, 두번째 인자로 action을 받을 수 있다.
  • 이 함수에서는 state.counter++처럼 기존의 state 변경해도된다
    • 왜냐하면, redux toolkit에는 어떤 패키지가 존재하는데, 그 패키지가 이런 코드를 감지하면, 자동으로 기존의 상태를 복제한다
    • 그리고 새로운 상태 객체를 생성하고, 모든 상태를 변경할 수 없게 유지하고, 우리가 변경한 상태는 변하지 않도록 오버라이드한다
  • 결론은, redux toolkit을 사용하면, 기존의 state를 변경해도된다 (상태 변경 불가성 문제 해결)
    • 단, 이러한 작업은 반드시 리듀서 함수에서 진행되어야하며, 다른곳(ex, 컴포넌트등)에서는 진행되어서는 안된다
    • 꼭 다른곳에서 진행해야한다면, 기존 객체등을 복사하여 사용하자

5. 리덕스 툴킷에서의 저장소를 생성한다

• import { configureStore } from "@reduxjs/toolkit";
• 기존의 createStore과 다른점은 여러 개의 리듀서를 하나의 리듀서로 쉽게 합칠수있다는점이다. (복잡한 상태 관리 문제 해결)

const store = configureStore({
  reducer: counterSlice.reducer,
});

 

6. 컴포넌트에서 사용하기 위해서 내보낸다

• store를 내보내는것은 당연하고, 추가적으로 액션 객체를 내보내줘야한다
  • export const counterAction = counterSlice.actions;

 

7. 이제 컴포넌트에서 사용할수있다

• import { counterAction } from "../store";
• 이 counterAction 객체로 우리가 정의한 함수에 접근하면된다

const addHandler = () => {
    dispatchFn(counterAction.add());
  };

• 여기서 주의점은 함수를 가르키는것이 아닌, 실행시켜야한다
• 만약 페이로드가 존재하는 함수가 있다면, 매개변수를 넘겨줘야하는데, 이것은...

add5(state, action) {
      state.counter = state.counter + action.payload;
    },

...

const add5Handler = () => {
    dispatchFn(counterAction.add5(5));
  };

• 이처럼 ()안에 인자로 넣어주면된다
• 딘, 리덕스와는 다르게 받는곳에 이름이 반드시 payload여야한다

 

 

이처럼 리덕스 툴킷을 사용하면 더 쉽게 리덕스를 활용할 수 있고, 문제점들도 해결된다.

 

리덕스와 리덕스 툴킷을 애초에 동시에 기획한건지, 리덕스를 사용하다가 불편해서 리덕스 툴킷을 만든건지는 모르겠지만, 

문제가 발생하거나, 불편하면 바로 해결할 방법을 연구하고, 실현시키는 이러한 개발자들은 정말 존경스럽다

 

다음 글에서는 마지막으로 리덕스에서 사이드이펙트&비동기코드를 다루는 방법을 살펴보고 리덕스를 마무리해보자