[react] Thunk

Thunk는 비동기 작업이 필요할 때 사용하는 미들웨어 기능이다. 📕

📌 공식문서 : https://redux-toolkit.js.org/api/createAsyncThunk

미들웨어

---

주로 비동기 API 관련 작업 시 사용된다. Redux에서는 Action과 Reducer 중간에 비동기 작업이 필요할 때 미들웨어를 부착하여 진행한다.

Thunk

---

Redux에서 많이 사용하는 미들웨어 중 하나이다. 지금까지는 dispatch의 매개변수로 action 객체를 사용했으나, 이를 함수로 사용할 수 있게 하여 redux action이 실행되기 전에 우리가 원하는 작업을 추가할 수 있다. 이 때 중간에 추가되는 함수를 thunk 함수라고 한다.

사용하기 : 기본

---

• 설치하기

  yarn add @reduxjs/toolkit
  

• thunk 함수 만들기

  import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
    
  export const __THUNK_NAME = createAsyncThunk(
      'MODULE_NAME/ACTION_VALUE', 
      (payload, thunkAPI) => {
          // 실행하고자하는 내용 ( 주로 비동기 작업이 여기에 들어간다. )
      })
  

  매개변수 thunkAPI를 통해 Thunk에서 제공하는 API 기능을 사용할 수 있다.

• reducers에 thunk 등록 및 내보내기

  const REDUCER_NAME = createSlice({
    name: "MODULE_NAME",
    initialState,
    reducers: { 
        ACTION_VALUE: (state, action) => {
  		// 실행하고자하는 내용
      },
    },
    extraReducers: { }
  });
    
  export const { ACTION_NAME } = REDUCER_NAME.actions;
  export default REDUCER_NAME.reducer;
  

• dispatch (thuck함수) 실행하기

  import { useDispatch } from "react-redux";
  import { __THUNK_NAME } from "./redux/modules/REDUCER_NAME";
    
  const COMPONENT_NAME = () => {
  	const dispatch = useDispatch();
  	dispatch(__THUNK_NAME(PAYLOAD));
       
  	return ( );
  };
    
  export default COMPONENT_NAME;
  

사용하기 : thunkAPI를 이용하여 promise status 값에 따르는 호출 함수 만들기

---

• promise를 반환하는 thunk 함수 만들기

  import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
    
  export const __THUNK_NAME = createAsyncThunk(
    "MODULE_NAME/ACTION_VALUE",
    async (payload, thunkAPI) => {
      try {
            
        // Promise의 status를 fulfilled로 return한다. 매개변수는 payload값으로 action에 전달된다.
        return thunkAPI.fulfillWithValue();	
      } catch (error) {
            
        // Promise의 status를 reject로 return한다. 매개변수는 payload값으로 action에 전달된다.
        return thunkAPI.rejectWithValue();
      }
    }
  );
  

• extraReducers에 thunk 등록 및 내보내기

  promise status에 따라 다른 action을 사용할때에는 extraReducers에 등록한다.

  export const REDUCER_NAME = createSlice({
    name: "MODULE_NAME",
    initialState,
    reducers: {},
    extraReducers: {
      [__THUNK_NAME.pending]: (state, action) => {
        // promiss status가 pending일 때 실행하고자하는 내용
      },
      [__THUNK_NAME.fulfilled]: (state, action) => {
        // promiss status가 fulfilled일 때 실행하고자하는 내용
      },
      [__THUNK_NAME.rejected]: (state, action) => {
        // promiss status가 rejected일 때 실행하고자하는 내용
      },
    },
  });
    
  export const {} = REDUCER_NAME.actions;
  export default REDUCER_NAME.reducer;
  

• dispatch 함수를 통해 thunk 함수를 실행하는 방식은 위 기본 사용 예제와 동일하다.