지난 가든그램 프로젝트에서, 서버에서 불러오는 데이터를 리덕스에 연결시켜 사용하고 싶었는데... 그 때 필요한 미들웨어 thunk에 대해서 알아보도록하고, 적용해 보자! (오늘은 개념만 정리 하기로!)

개념

thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다. 즉 dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 되는 것!

그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것

• dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)

이런 흐름과 같이 실행된다!

사용법

1. 우리의 첫 thunk 함수 만들기
2. extraReducer에 thunk 등록하기
3. dispatch(thunk 함수) 하기
4. 테스트

thunk 함수 생성

예시 Thunk 함수 목적

“3초를 기다리고” 3초가 지나면 원래 하려고 했던 함수 실행

형태

첫번째 인자에는 Action Value, 두번째 인자에는 함수가 들어감
(이 함수에 우리가 하고 싶은 작업들을 구현)

//예시
// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
export const __addNumber = createAsyncThunk(
	// 첫번째 인자 : action value
  "addNumber", 
	// 두번째 인자 : 콜백함수 
  (payload, thunkAPI) => {
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);
const initialState = {
  number: 0,
};
const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});
export const { addNumber, minusNumber } = counterSlice.actions;
export default counterSlice.reducer;

정리

• 리덕스 미들웨어를 사용하면, 액션이 리듀서로 전달되기전에 중간에 어떤 작업을 더 할 수있다.
• Thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해준다. [thunk의 핵심]
• 리덕스 툴킷에서 Thunk 함수를 생성할 때는 **createAsyncThunk 를 이용한다.**
• **createAsyncThunk() 의 첫번째 자리에는 action value, 두번째에는 함수가 들어간다.**
• 두번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데, 첫번째 인자는 컴포넌트에서 보내준 payload이고, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.