Redux-thunk

Redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어 이다.
이 미들웨어를 사용하면 액션 객체가 아닌 함수를 dispatch 할 수 있다.
함수를 dispatch 할 때에는, 해당 함수에서 dispatch와 getState를 파라미터로 받아와주어야 한다.
이 함수를 만들어주는 함수를 우리는 thunk라고 부른다.

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}
/*
삼항 연산자 사용
const thunk = store => next => action =>
  typeof action === 'function'
    ? action(store.dispatch, store.getState)
    : next(action)
*/

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

위의 함수에서 리턴되는 함수가 결국 thunk middleware함수이다.
이 함수는 redux store에서 dispath, getState api를 받고, 다음 미들웨어로 액션을 보내는 next를 받는다.
결국 마지막 함수로 우리가 dispatch할 액션을 인자로 받는다.

• 리덕스의 동작원리는 액션, 디스패치, 리듀서로 이루어진다.
• 리듀서는 순수함수로서 side effect를 발생시키면 안된다.
• 비동기 로직을 처리하기 위해 리덕스 미들웨어를 사용한다.
• redux-thunk는 함수를 액션으로 보냈을때 처리하기 위함이다.