[React] Redux middleware 리덕스 미들웨어

🔸 Redux란?

리덕스는 Flux 패턴을 구현한 대표적인 라이브러리 중의 하나입니다.

Flux 패턴

페이스북에서 애플리케이션에서의 데이터 흐름이 복잡해며 발생하는 문제를 해결하기 위해 발표한 패턴입니다.

이 패턴은 데이터가 단방향으로만 흐르고, 새로운 데이터를 넣으면 처음부터 데이터 흐름이 다시 시작됩니다. 이를 통해서 상태의 전이 현상을 없애주고 예측 가능하다는 특징을 가지게 됩니다.

동작

화면에서 액션이 발생하면 이를 디스패처가 리듀서에 전달하고, 리듀서는 상태를 변경합니다.

이 모든 상태는 스토어에서 관리합니다.

한계

리덕스 스토어에서는 동기적으로 액션을 디스패치하고, 리듀서 함수를 호출하여 state를 업데이트하는 것을 담당합니다.

즉, 비동기 처리는 수행하지 못하는 한계가 있습니다.

🔸 Redux middleware란?

리덕스 미들웨어를 사용하면 액션이 디스패치된 다음, 리듀서에서 해당 액션을 받아와 업데이트하기 전에 추가적인 작업을 할 수 있습니다.

주로 비동기 로직을 처리할 때 사용되며, 대표적으로 Redux-thunk, Redux-saga 라이브러리가 존재합니다.

구현

리덕스 미들웨어는 아래와 같이 구현되어 있습니다.

const middleware = store => next => action => {
  // 하고 싶은 작업...
}

위 함수를 풀어쓰면 아래와 같습니다.

function middleware(store) {
  return function (next) {
    return function (action) {
      // 하고 싶은 작업...
    };
  };
};

파라미터 상세

store : dispatch, getState 등의 내장함수를 사용할 수 있습니다.

next : 액션을 다음 미들웨어에 전달합니다. 만약 다음 미들웨어가 없으면 리듀서에 액션을 전달합니다.

action : 현재 처리하고 있는 액션 객체입니다.

🔸 Redux thunk

redux thunk는 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어입니다.

리덕스에서는 액션 객체를 디스패치 하였지만, redux thunk를 사용하면 함수를 디스패치할 수 있습니다.

redux thunk는 아래와 같이 구현되어 있습니다.

const thunk = store => next => action =>
  typeof action === 'function'
    ? action(store.dispatch, store.getState)
    : next(action)

예제

export function setRegions(regions) {
  return {
    type: 'setRegions',
    payload: {
      regions,
    },
  };
}

export function loadRegions() {
  return async (dispatch) => {
    const regions = await fetchRegions();

    dispatch(setRegions(regions));
  };
}

액션 생성 함수 내에서 dispatch를 파라미터로 받는 함수를 리턴하는 형태로 비동기 처리를 할 수 있습니다.

하지만 어떤 액션 생성 함수에서는 객체를 반환하고, 어떤 액션 생성 함수에서는 함수를 반환하기 때문에 액션이 복잡해진다는 단점이 있습니다.

🔸 Redux saga

redux saga는 redux thunk 다음으로 가장 많이 사용되는 라이브러리입니다.

액션을 모니터링하고 있다가, 특정 액션이 발생하면 특정 작업을 하는 방식으로 동작합니다.

redux saga는 redux thunk로는 못하는 작업을 처리할 수 있습니다.

1. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있습니다
2. 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행할 수 있습니다.
3. 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리할 수 있습니다 (참고)
4. API 요청이 실패했을 때 재요청하는 작업을 할 수 있습니다.

또한, redux thunk와 달리 action이 복잡해지지 않는다는 장점이 있습니다.

반면, redux saga를 사용하기 위해서는 자바스크립트 ES6의 제너레이터 개념을 이해하고 있어야 하기 때문에 초기 러닝 커브가 높은 편이라는 단점이 있습니다.

🔸 Redux thunk vs Redux saga

	Redux thunk	Redux saga
장점	- saga에 비해 보일러 플레이트 코드가 적고 이해하기 쉽다.	- saga가 제공하는 다양한 effects를 사용하여 깔끔한 로직 구현이 가능하다.
단점	- 복잡한 async 로직으로 인해 콜백 지옥을 발생시킬 수 있다. - unit test가 어려운 구조로 되어있다.	- thunk에 비해 보일러 플레이트 코드 양이 많다. - 러닝 커브가 높다.

 

참고

https://min9nim.vercel.app/2020-04-23-redux-saga/

https://ko.redux.js.org/tutorials/essentials/part-5-async-logic

https://doqtqu.tistory.com/335