[TIL] 24_0216 리덕스 툴킷(RTK)

리덕스 툴킷

리덕스 툴킷은 리덕스를 배웠던 구조와 패러다임이 전혀 다르지 않아.

새로운 게 아니야.

쓰는 방법은 useSeletor, dispatch 의 업데이트 부분들이 같고, 바뀐 부분은 설정하는 부분들인 모듈(modules)부분들이 달라.

 

 

리덕스 툴킷 설치 방법

$ yarn add @redux/toolkit react-redux

 

$ npm install @redux/toolkit react-redux

 

 

 

기존의 리덕스를 툴킷으로 바꾸는 방법은 쉬워. 리듀서는 똑같이 모듈스안에서 만들어져. 과정은 처음에 creatorStore, rootreducer, store를 provider에 껴서 만드는 건 같아. 

 

 

기존의 리덕스와 리덕스 툴킷의 차이

 

기존 리덕스에선 휴먼에러를 방지하기 위해 액션 밸류(action), 액션 크리에이터(action creator) 썼잖아. 디스패치를 할 때 직접 액션객체를 타입과 패이로드를 입력하는 게 아니라 휴먼에러를 줄이기위해 액션 크리에이터를 입력해줬고. 리듀서를 화살표함수로 표현해주고 스위치케이스문을 통해 타입에 맞는 적절한 처리를 해줬어.

 

크리에이트 스토어에 가져다 보면. 리덕스 팀은 configStore의 api를 추천하고 있어. 기존에는 순수 리덕스를 사용했다면 (createStore, conbineReducer) 이걸 쓰지말고 configStore의 api를 규칙으로 만들었어. 

 

순수 리덕스에서 쓰이는 createStore, combineReducer를 쓰지말고

- 기존 리덕스

//AS IS : 일반 리듀서
const rootReducer = combineReducers({
counter, counter,
})

const store = createStore(rootReducer);

 

 

- 툴킷에서 제공하는 configStore의 API 사용 시, configureStore로 한 번에 쓸 수 있어.

const store = configureStore({
    
    reducer: {
        //키 밸류 페어.
        counter : counter,
        user: user,
    }
    
})

export default store;

 

 

 

직접 세가지를 타이핑 해주려니 타이핑 할 게 많아져서 불만이 많아졌어 개발자들이, 이런 것들을 한 번에 만들 수 있는 방법 api 를 제공하는데 이걸 슬라이스라고 하는겨.

슬라이스를 사용하면 기존의 모듈 구조가 2가지로 줄어들어. initialState과 counterSlice(리듀서)로.

 

느낀점

- 리덕스를 쓰다가 툴킷을 보니 속이 편해졌어. 타이핑할 게 너무 많았다보니 정말 귀찮고 양이 많기도 해서 모듈을 계속 잘게 잘게 쪼개서 썼거든.