reducers vs extraReducers, createAsyncThunk

Redux Toolkit 에서 사용되는 reducers 와 extraReducers 의 차이를 알아보자. stackoverflow 를 참고하였다.

reducers 는 액션함수를 생성함과 동시에 해당 액션함수에 대응하는 역할을 한다. extraReducers 는 사용자가 slice reducer 내에서 액션함수에 접근할 수 있게하지만, extraReducers 내에서 액션함수를 생성하지 않는다는 점이 기존의 reducers 프로퍼티와의 가장 큰 차이점이다.

extraReducers 프로퍼티를 사용하는 경우는 이미 다른 곳에서 정의된 액션생성함수를 사용할때인데, 가장 흔한 케이스는 비동기를 위해 createAsyncThunk 를 사용하여 정의된 액션함수를 사용하거나, 다른 slice 에서 정의된 액션함수를 사용하는 경우이다.

결론: slice reducer 에 맵핑된 내부 액션함수가 아닌, 외부의 액션을 참조하기 위해 사용된다.

비동기 처리를 위한 createAsyncThunk

어느 개발자분께서 잘 정리해주신 글이 있어 자료를 참고하였다.

createAsyncThunk 는 createAction 의 비동기 버전을 위해 고안되었다. 액션 타입 문자열과 프로미스를 반환하는 콜백 함수를 인자로 받아서 주어진 액션 타입을 접두어로 사용하는 프로미스 생명 주기 기반의 액션 타입을 생성한다.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)

    return response.data
  }
)

const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {},
  // extraReducers에 케이스 리듀서를 추가하면 
  // 프로미스의 진행 상태에 따라서 리듀서를 실행할 수 있습니다.
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {})
      .addCase(fetchUserById.fulfilled, (state, action) => {
	      state.entities.push(action.payload)
      })
      .addCase(fetchUserById.rejected, (state) => {})
  },
})

// 위에서 fetchUserById, 즉 thunk를 작성해두고
// 앱에서 필요한 시점에 디스패치 하여 사용합니다.

// ...

dispatch(fetchUserById(123))
//결론적으로 외부의 액션함수를 사용하여 원하는 slice 내에서 상태처리를 할 수 있게 된다.

위 코드를 보면 프로미스의 진행 상태에 따라 개별적으로 리듀서를 실행할 수 있는 것을 알 수 있다. slice 내부에서 리듀서와 타입, 액션 생성함수를 하나로 합쳐 생성할 수 있는 편리함과 동시에 추가적으로 외부의 비동기 액션함수를 가져와 slice 내부의 state 를 변경할 수 있다는게 정말 유용한 것 같다.

참고로 액션함수 개당 하나씩의 builder 를 사용한다.

[출처]

http://blog.hwahae.co.kr/all/tech/tech-tech/6946/
https://stackoverflow.com/questions/66425645/what-is-difference-between-reducers-and-extrareducers-in-redux-toolkit