[TIL] 20211001

Palette 프로젝트에서 상태관리를 위해 redux-toolkit + redux-saga를 사용하기로 했다.
redux-saga는 취업 과제(...)를 위해 강제로라도 공부했지만 redux-toolkit은 전혀 다뤄보지 못해서 공부가 필요했다.

갑자기 실전 프로젝트 할 때가 생각난다.
타 팀의 한 프론트엔드 동기님께서 redux-toolkit 무조건 써야 한다고, 코드양도 줄어들고 공부하는데 10분밖에 걸리지 않았며 엄청난 추천을 해주셨다.

하지만 그 때는 이미 프로젝트의 시간이 절반 이상 지나갔을 때였고,
우리의 코드는 이미 너무 방대하였으며,
구현해야 할 코드도 넘치게 남아있었다😂😂😂

그래서 보류해둔 redux-toolkit을 오늘 접하게 되었다.

내일 마저 공부가 필요할 것 같지만 일단 정리한다.

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,
	}
})

Reducer 만들기(action type, action creator, reducer)

기존

기존에는 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;