리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어
이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다.
함수를 디스패치 할 때 에는 해당 함수에서 dispatch와 getState를 파라미터로 받아와야 한다.
리덕스에서 미들웨어는 주로 비동기 작업을 처리 할 때 사용한다.
미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수로 액션과 리듀서 사이의 중간자라고 볼 수 있다.
$ npm install redux-thunk
$ yarn add 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를 쓰는 것이 좋다.