- 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것이다.
- 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 **코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷이다. 줄여서 RTK 라고도 한다.
리덕스 툴킷 설치하기
yarn add react-redux @reduxjs/toolkit
리덕스 툴킷 사용하기
1. config.js
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {
counter: counter,
}
});
export default sotre;
2. moudules
- counter.js를 예시로 했다.
- createSlice()를 활용한다.
- 기존 리덕스에서 aciton value, action creator, reduce가 합쳐진 모습의 코드다.
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
number: 0,
};
const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
addNumber: (state, action) => {
state.number = state.number + 1;
},
minusNumber: (state, action) => {
state.number = state.number - 1;
},
},
});
export default counterSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;
- 기존과 달리 reducer를 통해 반환되는 값들에 불변성을 유지 하지 않아도 된다.
- 다른 패키지에서는 찾아볼 수 없는 굉장히 강력한 개발툴이다. 현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있다.