리덕스 미들웨어

리덕스 미들웨어란?

Redux 미들웨어는 액션을 dispatch하고 reducer에 도달하는 순간 사이에 사전에
지정된 작업을 실행할 수 있게 해주는 중간자이다.
로깅, 충돌 보고, 비동기 API와 통신, 라우팅 등을 위해 Redux 미들웨어를 사용한다.

리덕스 로깅 미들웨어 생성하기

리덕스를 이용할 때 나오는 로그를 찍어주는 미들웨어를 생성해보자.

로깅 미들웨어 함수 생성

위의 함수는 아래의 함수를 간단히 표현한 것이다. 아래 함수를 살펴보면 함수에서 함수를 리턴하고, 함수를 리턴하는 형식의 코드이다.

미들웨어 함수를 applyMiddleware 함수에 넣어주기

index.tsx에 다음 코드를 넣어주자.

// loggerMiddleware는 Redux 미들웨어입니다.
const loggerMiddleware = (store: any) => // 미들웨어의 첫 번째 인자는 스토어 객체입니다. 이 객체를 통해 현재 상태에 접근하거나 디스패치 등의 작업을 할 수 있습니다.
  (next: any) => // 미들웨어의 두 번째 인자는 next 함수입니다. next(action)을 호출하면 액션이 다음 미들웨어로 전달되며, 다음 미들웨어가 없다면 리듀서로 전달됩니다.
    (action: any) => { // 미들웨어의 세 번째 인자는 현재 처리하고 있는 액션입니다.
      console.log("store", store); // 현재 스토어 상태를 로그로 출력합니다.
      console.log("action", action); // 디스패치된 액션을 로그로 출력합니다.
      next(action); // 액션을 다음 미들웨어 또는 리듀서로 전달합니다.
};

applyMiddleware는 하나 혹은 더 많은 미들웨어를 받은 후에 함수를 리턴하는 함수이다.

createStore에서 미들웨어 넣어주기

loggerMiddleware 함수에 이어서 아래에 다음의 코드를 넣어주자.

// applyMiddleware()는 Redux의 함수로, 미들웨어를 적용할 수 있게 해줍니다.
// 여기서는 loggerMiddleware 를 적용하고 있습니다. 이 미들웨어는 액션과 상태 변화를 로깅하는데 도움을 줄 것입니다.
const middleware = applyMiddleware(loggerMiddleware);

// createStore()는 Redux 스토어를 생성하는 함수입니다.
// 두 번째 인자로 위에서 적용한 미들웨어가 들어갑니다. 이 미들웨어가 스토어에 적용됩니다.
const store = createStore(rootReducer, middleware);

콘솔에 store와 action에 대해 찍히는 것을 보니 잘 동작함을 알 수 있다.