Redux 미들웨어

리덕스 미들웨어를 사용하면 액션이 리듀서로 전달되기 전에 중간에 하고 싶은 작업들을 넣어서 할 수 있다.
대부부 서버와의 통신을 위해 사용한다.
그 중 가장 많이 사용되고 있는 것이 Redux-thunk이다.

thunk

dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.
dispatch(함수) 의 형태가 가능하도록 만들어준다.

액션이 리듀서로 전달되기 전에 하고자 하는 작업을 함수를 통해 넣어줄 수 있고,
중간에 함수가 실행되면서 작업을 처리해주고 함수 안에서 dispatch(객체)를 처리한다.

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

thunk 함수

기본적으로 Redux Toolkit을 사용하고 createAsyncThunk API를 사용하여 thunk 함수를 생성할 수 있다.
첫번째 인자에는 Action Value, 두번째 인자에는 콜백 함수가 들어간다.

• 두번째 인자인 함수에서 2개의 인자를 꺼내 사용할 수 있다. - payload, thunkAPI

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