• 공식 문서
• 공부에 도움 받은 생활코딩 유투브 영상

Thunk

비동기적인 작업을 리덕스로 처리할 때 사용하는 도구

createAsyncThunk

비동기 작업을 처리하는 action creator을 생성

const asyncAPI = createAsyncThunk(
  '타입',
  async () => {
    const data = await fetch('API주소').json();
    return data;
  }
)

pending, fulfilled, rejected

비동기 작업과 관련된 세 가지의 상태

• pending : 대기 상태
• fulfilled : 완료 상태
• rejected : 오류 상태

해당 상태별로 reducer가 필요
thunk는 각각의 상태에 따른 reudcer을 체계적으로 작성할 수 있도록 유도

const dataSlice = createSlice({
  name: 'dataSlice',
  initialState: { answer: '', image: '' },
  extraReducers: (builder) => {
    builder.addCase(asyncAPI.pending,(state, action)=>{
      // 대기 상태일 때
    });
    builder.addCase(asyncAPI.fulfilled, (state, action) => {
      // 완료 상태일 때
      state.answer = action.payload.answer;
      state.image = action.payload.image;
    });
    builder.addCase(asyncAPI.rejected, (state, action) => {
      // 오류 상태일 때
    });
  },
});
// 모두 정의할 필요는 없고 fulfilled만 정의해도 상관 없음

reducers / extraReducers

• reducers : 동기적인 작업을 할 때 사용
  toolkit이 자동으로 action creator을 생성
• extraReducers : 비동기적인 작업을 할 때 사용
  action creator이 자동으로 생성되지 않음

사용

function App() {
  const dispatch = useDispatch();
  const answer = useSelector((state) => {
    return state.data.answer;
  });
  const urlImg = useSelector((state) => {
    return state.data.image;
  });
  const getData = async () => {
    dispatch(asyncAPI());
  };
  return (
    ...
  );
}