redux (thunk) 3

먼저 thunk란, 특정 작업을 나중에 하도록 미루기 위해서 함수형태로 감싼것을 칭합니다.
그것이 바로 미들웨어를 통하기때문이 아닐까 생각해본다

왜 redux-thunk 를 쓸까

redux의 기본 골격은 보면 순수함수로 이루어진 action.type으로 스위치문으로 판별뒤 값을 리턴하는 방식으로 진행됩니다. 그렇기에 어떤 액션을 통해 dispatch 함수를 실행시킬 경우 결과는 항상 return 값으로만 남기 때문에 비동기를 실행을 시켜버리는 것과 값을 가져오는 것은 큰 차이가 있기에 기본적으로 불가능하다.
그렇기에 아래와 같은 미들웨어를 만들어주고 그 뒤에 typeof action=== ‘function’ 이라는 구문을 추가해 함수를 파악하고 그 자체를 실행시켜주는 방식으로 하는 것이 필요해져서
store.dispatch를 이용하는 것이라고 할 수 있다.

const createThunkMiddleware=extraArgument=>next=>action =>{
...
}

아래의 함수는 결국 위의 함수 방식과 다르지 않기에 실행 순서도 좀 더 명확하게 파악이 가능하다.

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    // 이부분이 thunk의 핵심

    return next(action);
  };
}

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

export default thunk;

npm i redux-thunk

const store = createStore(modules, applyMiddleware(logger, ReduxThunk))

위의 작은 방식으로도 현재는 아주 깔끔하게 provider에 store를 이용하고 비동기 처리도 dispatch 가능하다. 물론 react-redux 의 connect와 같이 쓰는 방식이 가장 유용하다고 생각한다.