redux -> toolkit 전환하기

이창호·2022년 5월 23일
0

현재 프로젝트에서 사용중인 템플릿에는 redux로 되어 있는 데, action과 reducer가 따로따로 나뉘어져 있고,
한가지를 수정하기 위해서 왔다 갔다 하는것이 굉장히 번거롭다는 생각이 들어서 redux-tookit 으로 변경하고자 한다.

redux

- 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를 업데이트 하지 않아도 되어 편했다.

profile
조금씩 나아지기

0개의 댓글