Redux Thunk

redux-thunk

리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어
이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다.
함수를 디스패치 할 때 에는 해당 함수에서 dispatch와 getState를 파라미터로 받아와야 한다.

미들웨어(middleware)란?

리덕스에서 미들웨어는 주로 비동기 작업을 처리 할 때 사용한다.
미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수로 액션과 리듀서 사이의 중간자라고 볼 수 있다.

redux-thunk 설치하기

$ npm install redux-thunk

$ yarn add redux-thunk

Redux Thunk 사용 방법

// configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk' // redux-thunk 임포트하기
import reducer from './reducer';

// Redux DevTools에서 logging 해주는 것처럼 콘솔에서도 logging 해준다.
const loggerMiddlewrae = ({ dispatch, getState }) => (next) => (action) => {
  console.log(action);
  return next(action)
}

const middlewares = [thunk, loggerMiddleware]

// applyMiddleware 인자로 넘겨서 적용
const store = createStore(reducer, applyMiddleware(...middlewares));

export default store;   

---

// login의 경우 백엔드 서버에 요청을 한 번 보내고 응답을 받아와야 한다.
// 대부분의 요청은 비동기이고 어떤 요청이든 아래 세 가지로 구성한다.(필수는 아니지만 원칙적으로는 세 단계가 있음)
export const loginRequestAction = (data) => {
  return {
    type: 'LOG_IN_REQUEST',
    data,
  }
}

export const loginSuccessAction = (data) => {
  return {
    type: 'LOG_IN_SUCCESS',
    data,
  }
}

export const loginFailureAction = (data) => {
  return {
    type: 'LOG_IN_FAILURE',
    data,
  }
}

// thunk 사용 예시
// 비동기 action creator
export const loginAction = (data) => {
  return (dispatch, getState) => {
    dispatch(loginRequestAction());
    axios
      .post('/api/login')
      .then((res) => {
        dispatch(loginSuccessAction(res.data));
      })
      .catch((err) => {
        dispatch(loginFailureAction(err));
      });
  };
};

간단한 프로젝트에서는 thunk를 써도 무방하지만 복잡할 때는 Redux-saga를 쓰는 것이 좋다.