현재 프로젝트에서 사용중인 템플릿에는 redux로 되어 있는 데, action과 reducer가 따로따로 나뉘어져 있고,
한가지를 수정하기 위해서 왔다 갔다 하는것이 굉장히 번거롭다는 생각이 들어서 redux-tookit 으로 변경하고자 한다.
- redux
|-- actions
| |--- authActions
|-- reducers
| |--- authReducer
리덕스는 actions과 reducer가 각각 나뉘어져 관리하는게 보통의 구조 같았으며,
action은 변경할 데이터와 타입 을 반환하고,
reducer는 변경 할 데이터와 타입에 조건에 맞는 결과물을 반환한다.
toolkit은 하나의 slice로 액션, 리듀서, 상태값 등이 하나의 slice 에 있기에 가독성도 좋았고,
대중적으로 많이 사용하는 thunk 또한 기본으로 내장이 되어 있어서 toolkit을 사용해보고자 하였다.
그리고 리덕스와 달리 immer 또한 기본으로 내장되어 있어서 불변성을 신경쓰지 않고 작업해도 되어 더 사용하기 편하다고 생각 하였다.
// sample
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
const initialState = {
user: undefined,
isLogin: false,
};
export const authSlice = createSlice({
name: "auth",
initialState: initialState, // 초기값
reducers: { // reducer ( 액션 생성과 리듀서가 한번에 정의된다 )
signOut: (state) => {
state.user = undefined;
state.isLogin = false;
},
},
extraReducers: (builder) => { // 비동기
builder.addCase(signIn.fulfilled, (state: any, { payload }: any) => {
state.user = payload["로그인정보"];
state.isLogin = true;
});
builder.addCase(signIn.rejected, (state: any, action: any) => {
state.user = undefined;
state.isLogin = false;
});
},
});
export const { signOut } = authSlice.actions;
reducers에 액션과 리듀서가 한번에 정의되어 편했으며, 불변성을 지켜가며 state를 업데이트 하지 않아도 되어 편했다.