[React.js] Thunk API (Redux Toolkit)

Thunk API (Redux Toolkit)

들어가며

• 리덕스 툴킷(Redux Toolkit)의 Thunk API에 대해 정리해본다.

 

Thunk API

개념

• 비동기 작업을 간편하게 처리할 수 있는 도구로, 여러가지 기능을 제공한다.
• 주로 API 호출과 같은 비동기 작업을 처리할 때 사용되며, 액션(Action)을 디스패치(Dispatch)하고 애플리케이션의 상태를 관리할 수 있다.

 

구성

• 기본적으로 2개의 매개변수를 제공한다.

@dispatch@

• 액션을 디스패치할 수 있는 함수
• 비동기 작업의 결과에 따라 다른 액션을 보낼 수 있다.

 

@getState@

• 현재 스토어의 상태(State)를 가져오는 함수
• 상태에 따라 로직을 다르게 처리할 수 있다.

 

사용 방법

• @createAsyncThunk@를 사용하여 비동기 액션 크리에이터를 생성한다.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

import { openModal } from '../modal/modalSlice';

const initialState = {
    items: [],
    isLoading: false, 
    error: null
}

// 비동기 액션 생성
export const fetchData = createAsyncThunk(
  'data/fetchData', // 액션 타입
  async (id, thunkAPI) => {
    // thunkAPI를 이용하여 다양한 정보를 얻을 수 있다. (state 등)
    console.log(thunkAPI);
    console.log(thunkAPI.getState());
    thunkAPI.dispatch(openModal());
    
    const response = await axios.get(`https://api.example.com/data/${id}`);
 
    // 반환되는 값은 fulfilled 액션의 payload로 전달된다.
    return response.data;   
  }
);

// 슬라이스 생성
const dataSlice = createSlice({
  // 슬라이스 이름 설정
  name: 'data',
  
  // 상태 초기값 설정
  initialState,
  
  // 리듀서 설정
  reducers: {},
  
  // 추가 리듀서 설정
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.isLoading = false;
        state.items = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message; // 에러 메시지 저장
      });
  },
});

export const { reducer: dataReducer } = dataSlice;

 

기능

• Thunk API를 사용하여 API 호출의 진행 상태(@pending@, @fulfilled@, @rejected@)를 관리를 할 수 있다.
• Thunk 내부에서 액션을 디스패치하여 상태를 업데이트할 수 있다.
  • 예) 데이터를 로드하는 동안 로딩 상태를 설정하고, 성공적으로 데이터를 가져온 후 상태를 업데이트할 수 있다.
• @getState@를 통해 현재 스토어의 상태에 접근할 수 있다.
  • 다른 슬라이스의 상태에 따라 로직을 다르게 적용할 수 있다.

 

예제 코드

• 버튼 클릭 시 데이터를 가져오는 비동기 작업을 수행하고 싶을 경우 아래와 같이 코드를 작성할 수 있다.

import { useDispatch } from 'react-redux';
import { fetchData } from './dataSlice';

const FetchButton = ({ id }) => {
  const dispatch = useDispatch();

  const handleFetch = () => {
    dispatch(fetchData(id)); // 버튼 클릭 시 fetchData 액션 디스패치
  };

  return <button onClick={handleFetch}>Fetch Data</button>;
};

 

참고 사이트

createAsyncThunk | Redux Toolkit