221215 항해99 39일차 redux-thunk

• 리덕스를 사용하는 애플리케이션에서 비동기 작업을 처리할 때 가장 기본적인 방법으로 redux-thunk라는 미들웨어를 사용한다. 이 미들웨어는 리덕스를 개발한 Dan Abramov가 만든 것이며, redux 공식 매뉴얼에서도 이 미들웨어를 사용해 비동기 작업을 다룬다.

thunk

• thunk란, 특정 작업을 나중에 하도록 미루기 위해서 함수 형태로 감싼 것을 칭한다.
• 예를 들어서 1 + 2를 지금 당장 하고싶다면 이렇게 한다.

const x = 1 + 2;

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

const foo = () => 1 + 2;

redux-thunk는 뭘 하는 미들웨어일까?

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

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

• 일반 액션 생성자는 특정 액션이 몇초 뒤에 실행되게 하거나, 현재 상태에 따라 아예 액션이 무시되게 할 수 없다.
• redux-thunk는 이를 가능하게 한다.
• 1초 뒤 액션이 디스패치 되게 하는 예제 코드

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

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

function incrementAsync() {
  return dispatch => { 
  // dispatch 를 파라미터로 가지는 함수를 리턴한다.
    setTimeout(() => {
      // 1 초뒤 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());
  };
}

• 간단하게 정리를 하자면 redux-thunk 는 일반 액션 생성자에 날개를 달아준다.
• 보통의 액션 생성자는 그냥 하나의 액션 객체를 생성할 뿐이지만 redux-thunk를 통해 만든 액션 생성자는 그 내부에서 여러가지 작업을 할 수 있다.이 곳에서 네트워크 요청을 해도 무방하다. 또한, 이 안에서 액션을 여러번 디스패치 할 수도 있다.

참조:
2-1. redux-thunk