[Practice Session 4] Redux Middleware 관련 질문

[yankee624]

1. redux-thunk를 사용할 때, 액션생성함수에서 dispatch => {return axios.get().then(res => dispatch(~~))} 와 같은 식으로, dispatch를 인자로 받아서 promise를 리턴하는 함수를 리턴합니다. 여기서 굳이 promise를 리턴하는 이유가 무엇인가요? 어차피 dispatch가 목적이라면 promise를 리턴할 필요가 없는 것 아닌가요?

2. practice session 4 pdf 71p에서도 나오듯이, 일반적으로 middleware에서는 next(action)을 리턴합니다. 이를 리턴하는 이유가 무엇인가요? (위 질문과 비슷하게, 액션을 다음 미들웨어로 넘기는 것이 목적이라면 굳이 리턴할 필요가 있나요?)

3. 만약 미들웨어의 체인이 길게 있는데, store.dispatch(action)을 하면 미들웨어들을 모두 건너뛰게 되나요?

[Algy]

1, 2. 원래 store.dispatch는 dispatched된 action 리턴하도록 되어있습니다. middleware가 있는 경우 그것의 return value가 그대로 store.dispatch의 return value가 됩니다. 따라서 원래 스펙(action)에 맞추도록 next의 값을 그대로 리턴해줍니다. 이것과 관련해서 이 링크의 6번 섹션 참고 바랍니다. redux-thunk의 경우 다음과 같이 구현되어있는데요, dispatch => {return axios.get().then(res => dispatch(~~))}식으로 promise를 리턴하면 store.disaptch의 리턴값이 promise가 되겠죠.

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

    return next(action);
  };
}

그리고 redux 시스템에서 middleware 리턴 값이 그렇게 중요하지는 않습니다. 그렇기 때문에 해당 리턴값에 documentation도 그렇게 잘 되어있는 편도 아니고, third-party addon 들에서도 크게 원래 규격을 지키는 것 같지는 않습니다. 따라서, 이런게 있구나 하고 넘어가시면 될 듯합니다.

3. 미들웨어 시스템 자체가 store.dispatch를 했을때 액션이 체인 하나하나를 통과하게 하는 메커니즘입니다. connect()에 사용된 mapPropsToState 등의 헬퍼 함수들은 내부적으로 모두 store.dispatch를 사용합니다.

[yankee624]

@Algy 답변 감사합니다! 그런데 3에서 제가 여쭤보고자 했던 것은, 리덕스 미들웨어에 관한 설명들을 찾아보니 아래와 같은 설명들이 많이 나와서였습니다. (next를 하면 다음 미들웨어로 넘기는 것이고, sotre.dispatch를 하면 미들웨어 체인의 처음부터 다시 시작하는 것이다.)

(https://velopert.com/3401)