AsyncThunk - extraReducers

AsyncThunk는 extraReducers를 사용한다.

extraReducers

Redux Toolkit에서 제공하는 메서드.
비동기 작업의 상태 변화를 처리하거나 다른 액션들에 대한 리듀서 로직을 추가하는 데 사용한다.
extraReducers는 Redux 리듀서에 추가적인 리듀서 로직을 정의하는 객체입니다. 기존 리듀서에 비동기 작업에 대한 액션 핸들링 로직을 추가하고 싶을 때 사용

import { createAsyncThunk } from '@reduxjs/toolkit';

// 비동기 작업을 수행하는 함수
const fetchPosts = async () => {
  // 비동기 작업 로직
};

// Thunk 액션 생성자 함수 생성
const fetchPostsAsync = createAsyncThunk('posts/fetchPosts', fetchPosts);

const postsSlice = createSlice({
  name: 'posts',
  initialState: [],
  reducers: {
    // 일반적인 액션 핸들러 정의
    addPost: (state, action) => {
      state.push(action.payload);
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPostsAsync.pending, (state) => {
        // 비동기 작업이 진행 중일 때의 상태 업데이트 로직
      })
      .addCase(fetchPostsAsync.fulfilled, (state, action) => {
        // 비동기 작업이 성공적으로 완료되었을 때의 상태 업데이트 로직
        state = action.payload;
      })
      .addCase(fetchPostsAsync.rejected, (state) => {
        // 비동기 작업이 실패했을 때의 상태 업데이트 로직
      });
  },
});

extraReducers는 createAsyncThunk 와 함께 사용되어 fetchPostsAsync의 성공, 실패 및 진행 상태에 따라 posts 상태를 업데이트하는 로직을 정의한다.