미들웨어 내부에서 store.dispatch를 사용하면 첫 번째 미들웨어부터 다시 처리합니다. 만약 미들웨어에서 next를 사용하지 않으면 액션이 리듀서에 전달되지 않습니다. 즉, 액션이 무시되는 것이죠.

이제 미들웨어를 마저 구현해 봅시다. 이번에 만들 미들웨어는 다음 정보를 순차적으로 콘솔에 보여 줍니다.

1. 이전 상태

2. 액션 정보

3. 새로워진 상태

 

loggerMiddleware.js

const loggerMiddleware = store => next => action => {
  console.group(action && action.type); // 액션 타입으로 log를 그룹화함
  console.log('이전 상태', store.getState());
  console.log('액션', action);
  next(action); // 다음 미들웨어 혹은 리듀서에게 전달
  console.log('다음 상태', store.getState()); // 업데이트된 상태
  console.groupEnd(); // 그룹 끝
};

export default loggerMiddleware;

---