createAsyncThunk

📍Async Thunk Function

- 전체 유저 리스트를 fetch하는 fetchUsers 흐름

createAsyncThunk 흐름도

📍createAsyncThunk

- 코드 예시

interface MyData {
  // ...
}

const fetchUserById = createAsyncThunk(
  'users/fetchById',
  // 액션 크리에이터 함수의 매개변수에는 typing 필요
  async (userId: number) => {
    const response = await fetch(`https://reqres.in/api/users/${userId}`)
    // Inferred return type: Promise<MyData>
    return (await response.json()) as MyData
  }
)

// the parameter of `fetchUserById` is automatically inferred to `number` here
// and dispatching the resulting thunkAction will return a Promise of a correctly
// typed "fulfilled" or "rejected" action.
const lastReturnedAction = await store.dispatch(fetchUserById(3))

 

 

1️⃣매개변수1 : typePrefix

- 타입 : string

- 액션 타입의 접두사

 

뒤에 아래 키워드들이 붙을 것임

- pending : 비동기 작업을 시작하기 전의 상태

- fulfilled : 비동기 작업이 끝나면 생성

- rejected : 비동기 작업 중 에러 발생하면 생성

 

각각의 3가지 상태 별로 reducer가 필요 -> extraReducer에 각각 만들어주면됨!

- 동기적 작업은 reducers

- 비동기적 작업은 extraReducers

 

2️⃣매개변수2 : action creator

- 비동기 작업을 처리하는 action을 만드는 함수

- 비동기 함수이므로 async를 붙여줘야 함

 

⭐action creator 함수의 매개변수에는 typing 필요

(다른 곳엔 굳이 typing 필요 없음)

 

📍참고

https://redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk

Usage With TypeScript | Redux Toolkit