웹 애플리케이션을 만들 때는 대부분 서버와 데이터를 연동한다. 서버의 API를 호출할 때는 총 세 가지 상태를 관리해야 한다.
리덕스에서 미들웨어란 액션이 디스패치되고 리듀서에서 처리하기 전에 사전에 지정된 작업을 하는 중간자
// loggerMiddleware.js
const loggerMiddleware = store => next => action => {
// 현재 스토어 상태 값 기록
console.log('현재 상태', store.getState());
// 액션 기록
console.log('액션', action);
// 액션을 다음 미들웨어 또는 리듀서로 넘깁니다.
const result = next(action);
// 액션 처리 후의 스토어 상태를 기록합니다.
console.log('다음 상태', store.getState());
console.log('\\n'); // 기록을 구분하려고 비어 있는 줄 프린트
return result; // 여기에서 반환하는 값은 store.dispatch(ACTION_TYPE)했을 때 결과로 설정합니다.
}
export default loggerMiddleware;
// App.js
const store = createStore(modules, applyMiddleware(loggerMiddleware))