미들웨어 조합하기

미들웨어는 모든 업데이트가 같은 규칙을 지나야 할 때 유용합니다. 예를 들어 logging, validation, normalization, instrumentation입니다.

먼저 logging 추가하기

store.pushMiddleware((nextState, next) => {
  const before = store.getState();
  next(nextState);
  const after = store.getState();

  if (!Object.is(before, after)) {
    console.debug("store changed", { before, after });
  }
});

next()가 나머지 chain을 적용하므로, next() 뒤의 코드는 뒤쪽 미들웨어가 업데이트를 차단하지 않는 한 최종 상태를 관찰합니다.

적용 전에 검증하기

store.unshiftMiddleware((nextState, next) => {
  const resolved = typeof nextState === "function" ? nextState(store.getState()) : nextState;

  if (resolved.count < 0) {
    return;
  }

  next(resolved);
});

이 미들웨어는 값을 검증하기 위해 updater 함수를 일찍 계산합니다. 따라서 뒤쪽 미들웨어는 원래 updater가 아니라 값을 받습니다. 미들웨어 순서가 중요하다면 이 선택을 문서화하세요.

순서를 의도적으로 고르기

• 기존 미들웨어보다 먼저 업데이트를 봐야 하는 규칙에는 unshiftMiddleware()를 사용합니다.
• 기존 앞쪽 규칙 뒤에 놓여야 하는 규칙에는 pushMiddleware()를 사용합니다.
• 구현이 reduceRight로 chain을 만들기 때문에 배열의 첫 미들웨어가 업데이트를 먼저 받는다는 점을 기억하세요.

미들웨어는 동기적으로 유지하기

미들웨어는 setState() 안에서 실행됩니다. 순서를 이해하기 어려운 async side effect는 피하세요. 비동기 작업이 필요하다면 store 밖에서 시작하고 결과가 준비되었을 때 setState()를 호출하세요.