[Redux] redux-thunk

Thunk란?
먼저 thunk를 이해해야 redux가 비동기를 어떻게 처리하는지 이해할 수 있다.
https://ko.wikipedia.org/wiki/%EC%8D%BD%ED%81%AC

썽크 - 위키백과, 우리 모두의 백과사전

thunk는 "생각된(think의 과거분사, 실제로 없는 말)" 후 무엇인가를 실행하겠다. 라는 뜻으로,
redux에서는 "무엇인가 로직을 처리하고 dispatch를 실행하겠다." 라고 생각하면 된다.
즉, dispatch전 실행될 코드를 thunk로 이해하면 되겠다.
 
 
redux-thunk

기본적으로 redux는 비동기처리가 불가능하다.

Action을 통한 Reducer 처리는 오직 동기로만 이루어진다.

 

그럼 Redux에서 1초후에 계산하는 비동기처리는 아예 불가능한 걸까?

이는 redux-thunk라는 미들웨어로 해결할 수 있다.

redux-thunk는 redux의 미들웨어로 action 대신 function을 반환하는 action creater를 사용할 수 있게 한다.

redux	redux-thunk
dispatch(action)	dispatch((dispatch) => { dispatch(action) })

 

Action에 1초후에 계산하는 비동기처리가 함수로 들어간다.

Action에 함수가 들어간다니... 객체가 아니기 때문에 Redux는 에러를 반환한다.

하지만 이 때 redux-thunk 미들웨어가 적용되어 있다면, thunk 함수 형태의 Action을 미들웨어가 처리해준다.

 

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

dispatch(incrementAsync()) // 실행

dispatch 안에 Action으로 1초후에 계산하는 비동기 thunk 함수를 전달한다.

redux-thunk가 적용되어 있다면 thunk 함수의 로직(1초 지연)이 먼저 실행되고 의도한 dispatch가 실행된다.

 

redux-thunk 구성.

yarn add redux-thunk

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(rootReducer, applyMiddleware(thunk))