rtk +typescript) createAsyncThunk의 generic

작성중입니다..

type UpdateCurrentUserProfile = Pick<UserStateTypes["userData"], "uid" | "username">

type UpdateUserName = Pick<UserStateTypes["userData"], "username">


export const updateUserProfileNameHandler = createAsyncThunk<
      UpdateUserName,
      UpdateCurrentUserProfile,
      {rejectValue:FirebaseError}
	>("user/updateUserProfileHandler",
  async (currentUser,{rejectWithValue}) => {
  
  try{
    const docRef = await doc(db,'users',currentUser.uid)
    await updateDoc(docRef, {
      username: currentUser.username
    })
    return {username:currentUser.username}
    
  }catch(err) {
    const typedError = err as FirebaseError
    if(!typedError.name){
      throw err
    }
    return rejectWithValue(typedError)
  }
  
  
})

1. UpdateUsername
   cAT의 내부에서 try/catch문을 사용할 때 정상적으로 요청이 성공했을 때의 return되는 값의 타입.

2. UpdateCurrentUserProfile
   createAsyncThunk의 매개변수로 사용하는 값의 타입

3. {rejectValue:FirebaseError}
   try문에 발생한 에러로 catch문으로 넘어갔을 때 return되는 값의 타입

주의할 점: interface로 정의된 타입이라면 return할 때 객체 형태로 return을 해주어야 한다.

1번째 제네릭 인수는 builder.addCase(cAT.fulfilled)의 payload값의 타입으로,
3번째 제네릭 인수는 builder.addCase(cAT.rejected)의 payload값의 타입으로 들어간다

    builder.addCase(updateUserProfileNameHandler.fulfilled,
	(state,{payload}) => {
      state.loading = false;
      state.error = null;
      state.userData.username = payload.username
    })