📕 재미있는 Redux(2)(redux-toolkit 사용하기)

리덕스는 재미없었지만 리덕스 툴킷 덕분에 조금 재밌어졌다. 정말 다행이다. 😀

🔨 설치

npm install @reduxjs/toolkit react-redux

또는

yarn add @reduxjs/toolkit react-redux

설치부터 간편하다. 과거엔 redux, react-redux 또 필요하다면(거의 필수적) devtools, saga, thunk, actions 등등 다양한 커스터마이징이 가능했다.

처음 사용해본다면 필히 어지러움을 느낀다.

이런 작업들이 모두 간편해졌다니 정말 감사하다.

🙉 사용법

리덕스 툴킷은 내부적으로 thunk와 devtools를 제공한다.

1. store 선언

// store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

기존의 사용법과 마찬가지로 store를 만들어야한다. 이때 createStore가 아닌 configureStore를 사용했는데 사용법이 조금 다르다.

기존에는 combineReducers로 통합해 하나의 reducer만 제공했다면 이제는 reducer 객체에 그냥 추가하기만 하면 된다.

그리고 기본적으로 devtools를 내장하고 있다.

2. createSlice

// counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

기존에는 actionCreator, reducer, initialState를 각각 따로 선언했지만 createSlice는 한번에 관리할 수 있다.

name은 action의 prefix 역할을 한다.

하단에 보이는 것과 같이 counterSlice 객체의 actions로 action Creator를 참조하고, reducer로 reducer를 참조할 수 있다.

관련있는 것들을 하나의 문서에서 다루는 Ducks 패턴을 따르는 것 같다.

3. 사용

사용은 기존과 같다. useSelector를 이용해 구독하고, useDispatch 훅을 이용해 액션을 발생시킨다.

4. 비동기 작업

비동기 처리는 아주 편리해졌다. saga와 thunk를 통한 비동기처리를 하면서 굉장히 어려움을 느꼈었는데, 그에 비해서는 아주 편해졌다고 할 수 있다.

export const login = createAsyncThunk(
  "auth/login",
  async ({ username, password }) => {
    const response = await authAPI.login({ username, password });

    return response.data;
  }
);

const authSlice = createSlice({
  name: "auth",
  initialState: { user: null, error: null, loading: false },
  reducers: {
    logout: (state) => {
      state.user = null;
    },
  },
  extraReducers: {
    [login.pending]: (state) => {
      state.loading = true;
    },
    [login.fulfilled]: (state, action) => {
      state.loading = false;
      state.user = action.payload;
    },
    [login.rejected]: (state) => {
      state.loading = false;
      state.error = "error!!!";
    },
  },
});

createAsyncThunk는 thuckActionCreator를 반환한다. 이것은 위의 예시에서 보이는 것처럼 pending, fulfilled, rejected에 따라 다른 action들을 참조하는 plain object다.

auth/login/pending 같은 형태로 액션을 만들어 준다고 생각하면 된다.

dispatch로 thnkAction을 호출할 때 발생하는 일은 다음과 같다.

1. pending 액션 발생
2. payloadCreator(createAsyncThunk에서 두 번째 인자로 들어간 콜백) 호출
3. Promise의 결과(resolve, reject)에 따라 각각의 액션 실행

작업이 아주 간편해졌다. 이래서 추상화 계층을 제공하는 걸 여러 프로그래밍 기법에서 강조하는 것일지도 모르겠다.

5. 에러 핸들링

export const loginUser = createAsyncThunk(
  "user/loginUser",
  async ({ id, password }, { rejectWithValue }) => {
    try {
      const response = await authAPI.login({ id, password });
      return response.data;
    } catch (e) {
      return rejectWithValue(e.message);
    }
  }
);

// 생략
  extraReducers: {
    [actions.loginUser.pending]: (state) => {
      state.isLoading = true;
    },
    [actions.loginUser.fulfilled]: (state, { payload }) => {
      state.name = payload.name;
      state.id = payload.id;
      state.isLogin = true;
      state.isLoading = false;
    },
    [actions.loginUser.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
  }

payload creator는 두 번째 인자로 thunkAPI를 받을 수 있다. 이때 thunkAPI.rejectWithValue를 이용하면 rejected 액션에서 payload로 직접 에러를 설정할 수 있다.

thunkAPI.rejectWithValue를 사용하지 않으면 일반적인 에러를 rejected 액션에서 사용한다.

후기

리덕스 툴킷은 참 감사한 패키지다.

아직은 숙련도가 낮아 능수능란하게 활용할 수는 없겠지만 기존의 코드를 리팩토링하거나 다양한 예제를 접해보며 숙련도를 쌓아야겠다.

리덕스가 조금은 좋아질 것 같다.

createAsyncThunk는 항상 이행된 프로미스를 반환한다는 말이 있는데 이 부분은 조금 더 알아봐야겠다.