1. 리덕스 툴킷 설치(리덕스 포함)
yarn add react-redux @reduxjs/toolkit
2. 리덕스 툴킷을 사용하면 기존 리덕스와 크게 달라지는 것은 두 가지
- module에서의 counterSlice hook 사용
- configStore에서의 configureStore hook 사용
3. module에서 createSlice() 사용
- createSlice는 기존 액션 크리에이터, 액션 value, 리듀서를 모두 합친 hook
- createSlice의 인자는 아래와 같음
const createSlice = createSlice({모듈 이름, 초기값, 리듀서})
- 위에 initialState를 먼저 설정한 후
const initialState = {number: 0,}
const counterSlice = createSlice({
name: "counter",
initialState,
// 리듀서로 들어간 것은 reducer가 되는 것과 동시에 액션크리에이터가됨
// 액션 밸류 또한 함수의 이름을 따서 자동 생성
reducers: {
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});
- 후에 counterSlice의 액션 구조분해할당으로 export
export const {addNumber, minusNumber} = counterSlice.actions
- counterSlicer의 reducer도 export
export default counterSlice.reducer;
- configureStore, 리듀서 couter 받아오기
const store = configureStore({
reducer: { counter: counter },
});