React

Redux-thunk (미들웨어)

nminy 2023. 4. 29. 17:55

미들웨어란?

리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.

카운트 프로그램에서 더하기 또는 빼기 버튼을 바로 하지 않고 3초를 기다렸다가 더하는 것, 3초를 기다리는 작업이 미들웨어가 해주는 것이다.

Thunk

리덕스에서 많이 사용하고 있는 미들웨어중에 하나이다. thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다. 즉 dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 되는 것이다!

중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것 이다. 그래서 아래 흐름과 같이 실행이 되며, 이 함수를 thunk 함수라고 부른다.

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

Thunk 사용하기

1. 우리의 첫 thunk 함수 만들기 : createAsyncThunk
    - reduxToolkit 내장 API
2. creatSlice => extraReducer에 thunk 등록하기
3. dispatch(thunk 함수) 하기
4. 테스트

 

😎3초를 기다리게 해보자!

redux > modules > counter.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
// 2개의 INPUT이 들어감
// (1) 이름 : 의미는 크게 없음
// (2) 함수
export const __addNumber = createAsyncThunk(
    'ADD_NUMBER_WAIT',
    (payload, thunkAPI) => {
        // 수행하고싶은 동작: 3초를 기다리게 할 예정
        setTimeout(() => {
            thunkAPI.dispatch(addNumber(payload))
        }, 3000)

    }
)

여기서 Thunk의 기능은 3초를 기다리게 한다.

 

App.js

import { __addNumber } from './redux/modules/counter';
  const addNumberBtn = () => {
    // dispatch(addNumber(+number))
    dispatch(__addNumber(+number))
  }

 

동작

+number로 addNumber가 들어오면 counter.js에 있는 payload로

(payload, thunkAPI)

addNumber에 넣어줬던 +number값이 들어오게 된다.

예를들어 100이라고 한다면,

그 값이 payload로 들어온다.

thunkAPI.dispatch(addNumber(payload))

들어와서 3초후에 밑에 있는 디스패치의 action.payload에 100이라는 값이 들어가면서 state가 업데이트 된다.

const counterSlice = createSlice({
    name: "counter",
    initialState,
    reducers: {
      addNumber: (state, action) => {
        state.number = state.number + action.payload;
      },

정리

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