[Redux] toolkit- createAsyncThunk

류슬기·2021년 5월 8일
0

TIL

목록 보기
15/16
post-thumbnail

https://redux-toolkit.js.org/api/createAsyncThunk 참고

createAsyncThunk

action type을 문자열로 받아들이고 Promise를 리턴하는 콜백함수다.
전달받은 action type에 따라 action types을 생성하고,
Promise콜백을 실행하고 dispach한 thunk action creator를 리턴한다.
비동기 처리시 추천

export const userLogin = createAsyncThunk('users/siginup', async (arg) => {
    const res = await UserService.siginin(arg);
    return res.data;
});

parameter

1. 문자열 action type

비동기 요청이 올 때 대표되는 액션 타입 constant

2. payloadCreator

  • 비동기 로직의 결과를 포함하여 리턴하는 콜백함수(근데 동기적인 것도 리턴할 수 있음)

    It may also return a value synchronously. If there is an error, it should either return a rejected promise containing an Error instance or a plain value such as a descriptive error message or otherwise a resolved promise with a RejectWithValue argument as returned by the thunkAPI.rejectWithValue function.

  • 두개의 argument 존재

    • thunkAPI : thunk함수에 전달되는 모든 파라미터를 포함하는 객체
    • arg : a single value
      첫번째 파라미터는 dispatch되면 thunk action creator를 지나간다.
      한가지 요청일 때 편리,
      만약에 여러 value라면 object로 만들어서 dispatch하면 된다.
dispatch(userSignup(userInfo));

3.options object

(생략가능해 보인다)

return value

returns a standard Redux thunk action creator

promise

createAsyncThunk는 createAction을 사용하여 세 개의 Redux 액션 생성자를 생성한다.pending, fulfilled, rejected 이 3가지들을 핸들하기 위해서는 builder 콜백을 통해서 가능하다.

extraReducers: (builder) => {
  builder.addCase(userSignup.fulfilled, (state, { payload }) => {
    return [...payload];
  });
},
profile
FE Developer🌱

0개의 댓글