redux-toolkit createAsyncThunk 의 기본적인 사용법

TOC

1. createAsyncThunk

createAsyncThunk

• createAsyncThunk는 함수이며 말 그대로 async 함수를 수행한다.
• createAsyncThunk 함수는 두 가지 인자를 받는다.

1. action type string
2. callback function

action type string = slice의 이름을 말한다

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus', // 1.action type string
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
) // callback function

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users', // action type

두 가지 인자를 받아 async 함수를 실행시키고 promise 결과를 반환한다.

반환하는 곳은 reducer의 slice 함수에 반환을 하게된다.

const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: {
    // Add reducers for additional action types here, and handle loading state as needed
    [fetchUserById.fulfilled]: (state, action) => {
      // Add user to the state array
      state.entities.push(action.payload)
    },
  },
})

// Later, dispatch the thunk as needed in the app
dispatch(fetchUserById(123))

코드를 보면 userSlice는 extraReducers에서 fetchUserById.fulfilled를 받고 있다.

Promise의 pending ? fulfilled : rejected의 결과에 따라 extraReducers의 pending시에 할 function(행동), fulfilled시에 할 function(행동), rejected시에 할 function(행동)을 나누어 실행시킬 수 있다.

여기서 주의할 점은 만약 firebase같은 곳에서 login이나 signUp을 서버에 요청하고 promise를 받는다면 user info를 담은 promise값이 리턴된다.

이 값들은 많은 정보들을 포함하고 있기 때문에 redux에서 에러를 띄우게 된다. We've always told Redux users they should not put non-serializable values in the store.

이런 경우 어떻게 해야하는지를 알아보자.

1. response로 받은 데이터 중 사용할 몇가지만 건져낸다.

response = { data:user.id, data:user.photoURL, ...}

장점은 당연히 redux 에러를 해결한다는 것이고 하나 더 변수의 사이즈가 줄어든다는 것이다.

2. 진짜 redux를 사용해야 하는지를 따져본다. (user의 state값을 받아와 store에 저장하는 경우)
   firebase에서는 auth ref를 통해 user의 state 값을 계속 확인할 수 있고. logIn 상태도 observe할 수 있다. 유저 정보를 update하는 경우에는 store와 서버를 전부 업데이트 해야하는 이중고를 겪을 수 있다. 이게 정말 필요한가?

3. response의 값을 변경한다.

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    let response = await userAPI.fetchById(userId)
    response=response.data.userName;
    return response
  }
)

response는 어차피 async에 감싸여 있기 때문에 promise로써 return된다.
promise 내부의 정보를 변경해 redux error를 피할 수 있다.