Redux 미들웨어

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

리덕스 미들웨어를 사용하는 이유 : 서버와의 통신

🍎 thunk

dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.

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

🌱 thunk 사용하기

createAsyncThunk 라는 API를 사용해서 thunk 함수를 생성할 수 있다.
이 API는 함수인데, 첫 번째 인자에는 Action Value, 두 번째 인자에는 함수가 들어간다.

두 번째 들어가는 함수에서도 인자를 꺼낼 수 있는데, 첫 번째 인자는 이 thunk 함수가 외부에서 사용되었을 때 넣은 값을 여기에서 조회할 수 있고, 두 번째 인자에서는 thunk가 제공하는 여러가지 API 기능들이 담긴 객체를 꺼낼 수 있다.

// thunk 함수는 createAsyncThunk 라는 툴킷 API를 사용해서 생성함.

export const __addNumber = createAsyncThunk(
	"ADD_NUMBER_WAIT",	
    (arg, thunkAPI)=>{},
)

// src/redux/modules/counterSlice.js

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;

// src/App.jsx

import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { minusNumber, __addNumber } from "./redux/modules/counterSlce";

const App = () => {
	const dipatch = useDispatch();
  	const [number, setNumber] = useState(0);
  	const globalNumber = useSelector((state) => state.counter.number);
  
	const onChangeHandler = (event) => {
	const { value } = event.target;
    setNumber(+value);
   };
  
  // thunk 함수를 디스패치한다. payload는 thunk함수에 넣어주면,
  // 리덕스 모듈에서 payload로 받을 수 있다.
  const onClickMinusNumberHandler = () => {
  	dispatch(__addNumber(number));
  };
  
  const onClickMinusNumberHandler = () => {
  	dispatch(minusNumber(number));
  };
  
  return (
  	<div>
      <div>{globalNumber}</div>
      <input type="number" onChange={onChangeHandler} />
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button onClick={onClickMinusNuberHandler}>빼기</button>
    </div>
  );
};

export default App;

🌳 정리

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

dispatch: thunk 함수안에서 dispatch를 할 때 사용
getState: thunk 함수안에서 현재 리덕스 모듈의 state 값을 사용하고 싶을 때 사용