📕 재미있는 Redux(3)(redux 미들웨어 써보기)

미들웨어는 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어이다.
출처: 위키피디아

🙄 미들웨어 적용하기

리덕스에서 미들웨어는 액션과 store 중간에서 특정 작업을 해주는 모듈이다. 리덕스는 store를 만들 때 미들웨어를 적용할 수 있으며, redux-saga, redux-thunk 등 다양한 미들웨어 라이브러리들이 존재한다.

이 포스트에서는 라이브러리의 사용보다는 미들웨어 그 자체에 대해 알아보도록 하자.

// module/counter.js
const INCREMENT = "counter/INCREMENT";
const DECREMENT = "counter/DECREMENT";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

const initialState = 0;

function counter(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
}

export default counter;

// module/index.js

import { combineReducers } from "redux";
import counter from "./counter";

const rootReducer = combineReducers({ counter });

export default rootReducer;

import React, { useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment } from "./module/counter";

const App = () => {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <>
      <div>{count}</div>
      <button onClick={() => dispatch(increment())}>+</button>
    </>
  );
};
export default App;

// index.js
const store = createStore(rootReducer);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

다음과 같은 구조에서 App 컴포넌트는 react-redux 패키지가 제공하는 hook을 통해 counter state에 접근하고 있다.

여기서 console을 통해 로깅하는 미들웨어를 작성해보자.

// middleware.js
export function loggerMiddleware(store) {
  return function (next) {
    return function (action) {
      console.log(store.getState());
      console.log(action);

      next(action);
    };
  };
}

리덕스에서 미들웨어의 규격은 store를 받아 next를 인자로 받는 함수를 리턴하고, next를 인자로 받는 함수에서 action을 인자로 받는 함수를 리턴한다.

export const loggerMiddleware = (store) => (next) => (action) => {
  console.log(store.getState());
  console.log(action);

  next(action);
}

다음과 같이 화살표 함수를 이용해서 작성할 수도 있겠다.

이렇게 작성하는 이유는 리덕스 내부의 applyMiddleware를 통해 미들웨어를 적용시키기 때문이다.

해당 내부의 구현 사항이 위와 같은 형태를 따르기 때문에 미들웨어를 생성할 때에도 위와 같은 currying 패턴을 이용해야한다.

이렇게 하면 매번 함수 호출 시 store와 next를 전달하지 않고 action만 전달받는 함수를 사용할 수 있다는 장점이 있다.

store는 고정이고, next도 다음 미들웨어, 마지막이라면 reducer이기 때문에 고정값이다. 변화하는 대상인 action에만 관심사를 둘 수 있다는 것도 장점이다.

const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

index.js 파일에서 다음과 같은 형태로 미들웨어를 적용시켰다. 콘솔 창을 통해 전달받은 현재 store의 state와 전달받은 액션이 무엇인지를 파악할 수 있다!

🎁 미들웨어를 활용한 비동기 처리

리덕스는 동기적으로 작동한다. 그렇기 때문에 비동기 처리를 위해선 따로 추가적인 처리가 필요하다. 예상했듯이 이 또한 미들웨어를 이용해 처리 가능하며 예시는 다음과 같다.

// module/board.js
const FETCH_START = "board/fetch_start";
const FETCH_FAILED = "board/fetch_failed";
const FETCH_SUCCESS = "board/fetch_success";

const initialState = {
  loading: false,
  boards: [],
};

export const createRequestThunk = (id) => async (dispatch, getState) => {
  dispatch({ type: FETCH_START });

  try {
    const result = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${id + 1}`
    ).then((res) => res.json());
    dispatch({ type: FETCH_SUCCESS, payload: result });
  } catch (e) {
    console.log(e);
    dispatch({ type: FETCH_FAILED });
  }
};

function board(state = initialState, action) {
  switch (action.type) {
    case FETCH_START:
      return { ...state, loading: true };
    case FETCH_SUCCESS:
      return {
        ...state,
        boards: state.boards.concat(action.payload),
        loading: false,
      };
    case FETCH_FAILED:
      return {
        ...state,
        loading: false,
      };
    default:
      return state;
  }
}

export default board;

추가적인 작업을 위해 board라는 이름으로 리듀서를 하나 생성했다. 이 리듀서를 기존 rootReducer에 연결해야한다.

위의 코드를 보면 createRequestThunk가 보인다. createRequestThunk는 함수를 반환하는 함수, 즉 고차함수이다. 재사용성을 위해선 따로 관리하는 게 좋지만 예시를 위해 한 파일에 작성했다.

createRequestThunk를 통해 반환받은 함수가 하는 일은 간단하다.

1. 비동기 작업 시작을 알리는 액션 dispatch
2. 비동기 작업 실행
3. 실행 결과에 따라 비동기 작업의 성공, 실패 액션 dispatch

사용은 App 컴포넌트에서 한다.

onst App = () => {
  const count = useSelector((state) => state.counter);
  const boards = useSelector((state) => state.board.boards);
  const loading = useSelector((state) => state.board.loading);
  const dispatch = useDispatch();

  const fetchData = () => {
    dispatch(increment());
    dispatch(createRequestThunk(count));
  };
  return (
    <>
      <div>{count}</div>
      <button onClick={fetchData}>+</button>
      {loading ? (
        <span>Loading...</span>
      ) : (
        boards.map((item) => <div>{item.title}</div>)
      )}
    </>
  );
};
export default App;

fetchData 함수를 보면 두 번째 dispatch로 함수가 들어갔다. dispatch에 전달하는 액션은 plain object여야 하는데 이것은 규칙에 어긋난다.

이를 처리하기 위해서 미들웨어를 활용할 수 있다.

// middleware.js

...

export function thunkMiddleware(store) {
  return function (next) {
    return function (action) {
      if (typeof action === "function") {
        action(store.dispatch, store.getState);
      } else {
        next(action);
      }
    };
  };
}

이 미들웨어가 하는 역할은 액션이 함수 타입으로 들어올 때와 그렇지 않을 때를 구분해서 각기 다른 작업을 수행하는 것이다.

함수 타입이 아닐 땐 평범하게 next 호출을 하지만 함수 타입일 경우 해당 함수를 실행시켜버린다.

이때 createRequestThunk에 store.dispatch와 store.getState를 전해 리덕스의 기능에 접근할 수 있게 한다.

createRequestThunk의 경우 내부에서 dispatch를 수행하기 때문에 이것은 다시 미들웨어로 들어가고 전달한 액션이 plain object이기 때문에 별다른 처리 없이 next에 action을 전달해 호출한다.

🔨 redux-thunk

redux thunk 패키지가 해주는 일이 위와 같은 작업이다. 물론 내부적으로 더 정교한 작업을 실행하겠지만 전체적인 모습은 위에 작성한 예시와 같다.

동기적으로 작동하는 리덕스의 액션들을 한 덩어리로 묶어 비동기 작업을 수행하도록 해주는 것이다.

후기

미들웨어에 대해 사용하고는 있었지만 이런 방식으로 돌아가는지는 알지는 못했다. 최근에는 리덕스 툴킷도 생기고 어려움이 점점 사라지고 있다지만, 그래도 원리적인 부분을 이해하는 것도 중요하다고 생각된다.