Redux Thunk 사용하기.

Redux Thunk? https://github.com/gaearon/redux-thunk

Redux Thunk는 Redux Action Creator를 비동기(Async)으로 사용하게 해주는 Redux의 Middleware다.

Redux Action Creator를 생성할때는 아래와 같은 규칙을 반듯이 지켜야 한다.

Action creator는 Function 이어야 한다

Action creator는 action(type property를 가지는 object)을 Return 해야한다.

Redux Thunk를 사용하면 여기에 한가지 규칙을 더 추가하여 Action creator를 작성 할 수 있다.

Action creator는 Function 이어야 한다

Action creator는 action(type property를 가지는 object)을 Return 해야한다.

+ Action Creator는 함수를 Return 할 수 있으며 'dispatch' argument와 함께 호출된다.

즉, Redux Thunk를 이용하면, action creator가 호출될때, API 호출등의 비동기적인 작업을 수행하고, 그 결과를 dispatch를 통해 전달 할수 있게 된다.

1. Redux Thunk 설치

npm install --save redux-thunk

2. Redux Thunk Middleware 적용하기.

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)
);

3.Redux Thunk의 사용 

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