Palette 프로젝트에서 상태관리를 위해 redux-toolkit + redux-saga
를 사용하기로 했다.
redux-saga는 취업 과제(...)를 위해 강제로라도 공부했지만 redux-toolkit
은 전혀 다뤄보지 못해서 공부가 필요했다.
갑자기 실전 프로젝트 할 때가 생각난다.
타 팀의 한 프론트엔드 동기님께서 redux-toolkit
무조건 써야 한다고, 코드양도 줄어들고 공부하는데 10분밖에 걸리지 않았며 엄청난 추천을 해주셨다.
하지만 그 때는 이미 프로젝트의 시간이 절반 이상 지나갔을 때였고,
우리의 코드는 이미 너무 방대하였으며,
구현해야 할 코드도 넘치게 남아있었다😂😂😂
그래서 보류해둔 redux-toolkit을 오늘 접하게 되었다.
내일 마저 공부가 필요할 것 같지만 일단 정리한다.
yarn add @reduxjs/toolkit
기존
import { createStore, combineReducer } from "redux";
import counter from "./module/counter";
const rootReducer = combineReducer({
counter,
});
const store = createStore(rootReducer);
export default store;
redux-toolkit 사용
import { configureStore } from "@reduxjs/toolkit";
import counter from "./module/counter";
export default configureStore({
reducer: {
counter,
}
})
기존
기존에는 action type, action creator, initialState, reducer 각각 만들어줘야 했다.
// action type
const INCREMENT = "counter/INCREMENT";
const DECREMENT = "counter/DECREMENT";
const INCREMENT_BY_AMOUNT = "counter/INCREMENT_BY_AMOUNT";
const DECREMENT_BY_AMOUNT = "counter/DECREMENT_BY_AMOUNT";
// action creator
export const increment = () => ({type: INCREMENT});
export const decrement = () => ({type: DECREMENT});
export const incrementByAmount = (num) => ({type: INCREMENT_BY_AMOUNT, payload: {num}});
export const decrementByAMount = (num) => ({type: DECREMENT_BY_AMOUNT, payload: {num}});
// initialState
const initialState = {
count: 0,
};
// reducer
const counter = (state = initialState, action) => {
switch(action.type) {
case INCREMENT:
return {...state, count: state.count++};
case DECREMENT:
return {...state, count: state.count--};
case INCREMENT_BY_AMOUNT:
return {...state, count: state.count + action.payload.num};
case DECREMENT_BY_AMOUNT:
return {...state, count: state.count - action.payload.num};
default:
return state;
}
}
export default counter;
redux-toolkit 사용
action type, action creatore 만들어 줄 필요가 없다🙂
initialState는 내부에 설정해도 되고, 밖에서 설정해서 사용해도 된다.
import { createSlice } from "@reduxjs/toolkit";
// slice
const counterSlice = createSlice({
// name과 reducers가 결합되어 action type이 "counter/increment"와 같이 생성된다.
name: "counter",
initialState: {
count: 0,
},
reducers: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
incrementByAmount(state, action) {
state.count += action.payload;
},
decrementByAmount(state, action) {
state.count -= action.payload;
}
}
});
// action creator 들은 만든 slice.actions로 export 해주면 된다.
export { increment, decrement, incrementByAmount, decrementByAmount } = counterSlice.actions;
// reducer도 slice.reducer로 뽑아내서 export 해준다.
export default counterSlice.reducer;