Redux Middleware, Redux-Thunk 살펴보기

1. Middleware란?

미들웨어는 리덕스를 사용자 정의 기능으로 확장하여 사용할 수 있는 도구이다. 액션을 디스패치했을 때 이를 리듀서에 전달하기 전에 미들웨어에서 먼저 처리하고 리듀서로 넘겨주는 역할을 하고, 비동기 API 호출을 포함하여 다양한 용도로 사용할 수 있다.(API 호출, Redux Action에 따른 Log 확인 등)

액션 ⇒ 미들웨어 ⇒ 리듀서 ⇒ 스토어 형태로 전달되는 것이다.

1-1) 미들웨어의 구조

다른 개발자가 만들어놓은 미들웨어가 많아서 실제로 사용할 때는 미들웨어를 만들어서 사용한다기보단 만들어진 미들웨어를 가져다가 사용한다. 그런데, 미들웨어가 어떻게 생성되는지를 알면 좀 더 이해하기 좋을 것 같다. 미들웨어는 어떻게 생겼을까?

const middleware = store => next => action => {
	/* ... */
}

1) store: 리덕스 스토어 인스턴스

2) next: 함수인데, next(action) 형태로 액션을 호출하면 다음 처리해야 할 미들웨어에게 액션을 넘겨주고 만약 없다면 리듀서에게 액션을 넘겨준다.

3) action: 디스패치된 액션

이 구조를 처음 봤을 때 이해하기가 조금 어려울 순 있지만 결국 미들웨어는 action 파라미터를 가진 함수를 반환하는 next 파라미터를 가진 함수를 반환하는 store 파라미터를 가진 함수이다.

2. 미들웨어로 비동기 요청 처리하기 → Thunk

Thunk는 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다. 일반적으로 함수를 호출하면 호출한 순간 바로 실행되는데, 함수 형태로 한번 감싸게 되면 호출하더라도 함수를 반환하게 돼서 바로 작업하지 않고 연산을 미룰 수 있다.

function add(a, b) {
	return a + b;
}
add(1, 2); // 호출하는 순간 바로 연산된다.

function thunkAdd(a, b) {
	const thunk = () => add(a, b);
	return thunk;
}
const func = thunkAdd(1, 2); // 함수를 호출하면 thunk 함수를 반환하게 되므로 연산은 이루어지지 않는다.

func(); // 이 때 반환된 thunk를 호출하므로 연산이 이루어진다.

리덕스를 사용하는 프로젝트에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 미들웨어로 redux-thunk가 있다. 해당 미들웨어를 사용하면 thunk 함수를 만들어서 디스패치할 수 있게 되고, 미들웨어가 그 함수를 전달받아 dispatch, getState 등으로 상호작용할 수 있다.

3. redux-thunk 사용해보기

• 이 과정은 https://redux-advanced.vlpt.us/2/02.html 과정을 따라가면서 정리한 내용입니다.
• 비동기 요청은 https://jsonplaceholder.typicode.com/ API를 사용합니다.
• Presentational Component(View 담당) | Container Component(Work 담당) 로 나누어 작성했습니다.

3-1) Sample 컴포넌트 만들기

• /src/components/Sample.js

const Sample = ({ loadingPost, post }) => {
  return (
    <section>
      <h1>포스트</h1>
      {loadingPost && '로딩 중...'}
      {!loadingPost && post && (
        <div>
          <h3>{post.title}</h3>
          <h3>{post.body}</h3>
        </div>
      )}
    </section>
  );
};

export default Sample;

이 컴포넌트는 loading 상태(boolean)와 post({ title: string, body: string })을 Container로부터 Props로 전달받는다. 필요한 post 데이터는 JSONPlaceholder에서 GET /posts API를 사용한다.

3-2) api 코드 작성하기

• /src/lib/api.js

import axios from 'axios';

const API_END_POINT = 'https://jsonplaceholder.typicode.com';

export const getPost = (id) => axios.get(`${API_END_POINT}/posts/${id}`);

비동기 요청은 axios를 사용하고, 요청 주소는 API_END_POINT로 따로 빼서 작성했다. 이렇게 하면 나중에 API 요청 주소가 변경되어도 해당 변수만 수정하면 되기 때문에 유지 보수 측면에서 더 좋다고 생각한다.

Data의 형태는 다음과 같다.

// 요청 id: 1
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

3-3) sample Reducer 만들기

• src/modules/sample.js

import * as api from 'src/lib/api';
import { handleActions } from 'redux-actions';

const GET_POST = 'sample/GET_POST'; // 시작
const GET_POST_SUCCESS = 'sample/GET_POST_SUCCESS'; // 성공
const GET_POST_FAILURE = 'sample/GET_POST_FAILURE'; // 실패

export const getPost = (id) => async (dispatch) => {
  dispatch({ type: GET_POST });
  try {
    const response = await api.getPost(id);

    dispatch({
      type: GET_POST_SUCCESS,
      payload: response.data,
    });
  } catch (e) {
    dispatch({
      type: GET_POST_FAILURE,
      payload: e,
    });
  }
};

const initialState = {
  loading: {
    GET_POST: false,
  },
  post: null,
};

const sample = handleActions(
  {
    [GET_POST]: (state, action) => ({
      ...state,
      loading: {
        ...state.loading,
        GET_POST: true,
      },
    }),
    [GET_POST_SUCCESS]: (state, action) => ({
      ...state,
      loading: {
        ...state.loading,
        GET_POST: false,
      },
      post: action.payload,
    }),
    [GET_POST_FAILURE]: (state, action) => ({
      ...state,
      loading: {
        ...state.loading,
        GET_POST: false,
      },
    }),
  },
  initialState,
);

export default sample;

• GET_POST: 액션 타입, 최초 호출 | 호출 성공 | 호출 실패 3가지 분기에 따라 dispatch할 예정이므로 3가지 상수를 작성해 줬다.
• getPost: dispatch를 반환하는 thunk 함수. 해당 함수 내에서 try, catch 문으로 비동기 요청을 보내고, 성공했을 때 | 실패했을 때 dispatch에서 다른 액션을 호출한다.
• sample: 리듀서. 각각의 액션 타입에 따라 상태를 관리한다.

3-4) rootReducer 생성하기

• /src/modules/index.js

import { combineReducers } from 'redux';
import sample from './sample';

const rootReducer = combineReducers({
  sample,
});

export default rootReducer;

지금은 하나의 리듀서밖에 없지만, 다른 모듈로 리듀서가 작성될 수 있으므로 미리 rootReducer를 생성해 놓으면 나중에 확장하기 용이할 것이다.

3-5) store 만들기

• /src/index.js

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import App from './App';
import rootReducer from './modules';
import ReduxThunk from 'redux-thunk';

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

여기서 applyMiddleware, ReduxThunk 모듈을 import해서 적용해 주고 있다.

• applyMiddleware: 미들웨어 API를 따르는 함수들을 파라미터로 넘겨줄 수 있고, 각각의 미들웨어는 store, dispatch, getState 함수를 명명된 인수로 받아서 함수를 반환한다.
• ReduxThunk: thunk 함수를 만들어서 디스패치할 수 있게 해준다.

3-6) SampleContainer 컴포넌트 만들기

• /src/containers/SampleContainer.js

import { useEffect } from 'react';
import { connect } from 'react-redux';
import Sample from 'src/components/Sample';
import { getPost } from 'src/modules/sample';

const SampleContainer = ({
  loadingPost,
  post,
  getPost,
}) => {
  useEffect(() => {
    getPost(1);
  }, [getPost]);

  return (
    <Sample
      post={post}
      loadingPost={loadingPost}
    />
  );
};

export default connect(
  ({ sample }) => ({
    post: sample.post,
    loadingPost: sample.loading.GET_POST,
  }),
  {
    getPost,
  },
)(SampleContainer);

해당 컴포넌트가 렌더링 되면 useEffect에 의해 getPost 요청을 보내고, getPost는 정의한 dispatch대로 비동기 요청을 수행한다. 여기까지 작성하고 App.js에 SampleContainer 컴포넌트를 렌더링 시키면 다음과 같이 정상적으로 동작하는 것을 확인할 수 있다.

3-7) Thunk 생성 함수로 리팩토링하기

여기까지만 해도 사실 정상적으로 동작하긴 한다. 그러나 새로운 API 요청이 생겨서 추가해야 할 때 getPost처럼 똑같이 액션 타입 3개, dispatch, try | catch 문을 작성해 줘야 한다. API가 한개 추가되면 그냥 작성해 줘도 문제는 없겠지만 만약 생성해야 하는 게 10개, 100개가 된다면? 똑같은 코드를 치는 것이라서 매우 번거로운 작업이 될 것이다. 이를 따로 util 함수로 빼서 사용해 보자.

• /src/lib/createRequestThunk.js

const createRequestThunk = (type, request) => {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;

  return (params) => async (dispatch) => {
    dispatch({ type });
    try {
      const response = await request(params);
      dispatch({
        type: SUCCESS,
        payload: response.data,
      });
    } catch (e) {
      dispatch({
        type: FAILURE,
        payload: e,
      });
    }
  };
};

export default createRequestThunk;

위에서 작성한 getPost와 유사하다. 액션 타입과 API 요청을 파라미터로 넘겨주면 아까 정의한 getPost처럼 thunk 함수를 반환하고 있다. 이를 getPost에 적용하면 다음과 같다.

• /src/modules/sample.js

import * as api from 'src/lib/api';
import { handleActions } from 'redux-actions';
import createRequestThunk from 'src/lib/createRequestThunk';

/* ... */

export const getPost = createRequestThunk(GET_POST, api.getPost);

엄청나게 간단해졌다. 다음에 똑같은 로직으로 API를 추가하더라도 위처럼 함수를 호출해 주기만 하면 된다. 홈페이지를 확인해 보면 마찬가지로 잘 동작한다.

※ Middleware에서 dispatch 파라미터를 잘못 넘겼을 때 발생한 에러

export default function createRequestThunk(type, request) {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;

  return (params) => async (dispatch) => {
    dispatch(type); // → 이 부분이 잘못됨..
		/* Thunk 비동기 로직 */
  };
}

Thunk함수를 매번 사용할 때마다 길게 작성하기보다 하나의 함수로 작성하고 import하면 사용하는 곳에서의 중복 코드를 많이 줄일 수 있다. 그래서 작성을 완료한 후 import하여 사용해 봤는데 아래와 같은 에러가 떴다..

항상 그런 것은 아니지만 이번 에러는 글의 내용에서 살짝 유추가 되어 꽤 금방 해결했다. 에러의 내용은 호출할 action은 객체 형태여야 하는데 문자열 형태로 들어왔다고 한다. 위에 작성한 코드(dispatch(type))에서 보이듯이 type은 sample/GET_REQUEST 같은 문자열 형태로 집어넣으려고 헀는데 이를 그대로 호출하니 에러가 발생했다. 이를 그대로 넣어주면 안 되고, **{ type } 처럼 객체 형태로 호출**해야 한다. 문자열뿐만 아니라 다른 형태에서도 발생할 수 있는 에러라고 생각되지만 다행히 에러 내용이 구체적이어서 발견할 수 있을 것 같다.

4. 정리

redux를 처음 학습할 때 redux/toolkit 위주로 봤었고, 이후 사용할 때 configureStore, createSlice, useSelector, useDispatch 등으로 엄청 편하게 사용했었다. 그때는 어려운 게 없다고 생각했었는데 지금 생각해 보면 connect 함수도 잘 몰랐고, 오늘 작성한 미들웨어, thunk 부분에 대해서도 완전히 새로운 것을 배우는 느낌이었다. 그래도 기본이 되는 부분을 한 번 짚고 넘어가는 것 같아 다행이고, 조금씩 응용하면서 실제로 사용할 때 아직 모자란 부분이 많겠지만 조금이나마 이해하고 사용할 수 있을 것 같다.

참고

• https://ko.redux.js.org/
• https://redux-advanced.vlpt.us/