Middle Ware

Middle Ware

redux thunk에 대해 설명하기 전에 미들웨어에 대해 설명해 보겠다. 미들웨어는 액션이 디스패치 되어서 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 설정한다. 

미들웨어를 액션과 리듀서 사이의 중간자라고 이해하면 된다.

리듀서가 액션을 처리하기 전에, 미들웨어가 할 수 있는 작업들은 여러가지가 있는데 단순히 전달받은 액션을 콘솔에 기록할 수도 있고 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있다.

what's a redux-thunk

리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법으로는 redux-thunk라는 미들웨어를 사용하는 것이다. 이를 사용하여 비동기 작업을 관리하는 건 매우 직관적이고 간단하다.

이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해 준다. 리덕스에서느 기본적으로 액션 객체를 디스패치한다. 일반 액션 생성자는 아래와 같이 파라미터를 가지고 액션 객체를 생성하는 작업을 한다.

let actionCreator = (payload) => ({action : 'ACTION', payload});

만약에 특정 액션이 몇 초 뒤에 실행되게 하거나, 현재 상태에 따라 아예 액션이 무시되게 하려면, 일반 액션 생성자로는 할 수가 없지만 redux-thunk는 가능케 한다.

아래 예제는 액션이 1초뒤에 디스패치되게 하는 코드이다.

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

이렇게 하고 나중에 store.dispatch(incrementAsync()); 를 하면 INCREMENT_COUNTER액션이 1초뒤에 디스패치 된다.

이번에는 조건에 따라 액션을 디스패치하거나 무시하는 코드를 작성해 보겠다.

function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

만약에 리턴하는 함수에서 dispatch, getState를 파라미터로 받게 한다면 스토어의 상태에도 접근할 수 있다. 따라서, 현재의 스토어 상태의 값에 따라 액션이 dispatch될 지 무시될지 정해 줄 수 있게 되는 것이다.

정리를 해 보면 보통의 액션생성자는 그냥 하나의 액션객체를 생성 할 뿐이지만 redux-thunk를 통해 만든 액션생성자는 그 내부에서 여러가지 작업을 할 수 있다. 이 곳에서는 네트워크 요청을 해도 될 뿐더러 액션을 여러 번 디스패치 할 수도 있다.

what's a thunk

thunk는 특정 작업을 나중에 하다록 미루기 위해서 함수형태로 감싼 것을 말한다.

예를 들면 1+2을 하고 싶으면 아래와 같이 할 것이다.

let x = 1 + 2;

위 코드는 실행되면 연산이 바로 진행된다. 하지만 다음과 같이 하면 1+2의 연산이 코드가 실행 될 때 바로 이뤄지지 않고 나중에 foo()가 호출 되어야만 이뤄진다.

// foo is a thunk!
let foo = () => 1 + 2;

Installation

yarn add redux-thunk

설치 후, redux-thunk는 applyMiddleware()를 사용하는 것을 가능하게 한다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

redux-logger

Installation

yarn add redux-logger

만약 development환경일 때만 사용하고 싶으면 아래 명령으로 설치해 주면 된다.

yarn add redux-logger --dev

그 다음 아래와 같이 코드를 작성해 주면 development일 때만 log를 확인할 수 있다. 

const env = process.env.NODE_ENV;
 
const middlewares = [thunk];
 
if(env === "development"){
    const { logger } = require("redux-logger");
    middlewares.push(logger);
}

이럴 경우 나의 액션이 유저들에게는 보여지지 않게 할 수 있다.