Redux-thunk에 대해 핸들러가 호출 할 함수를 디스패치하면 직접 호출하지 않는 이유는 무엇입니까?

Redux Thunk는 Redux가 비동기 프로세스를 처리하는 방법을 알아야하는 규칙을 도입 한 매우 얇은 미들웨어 (예 : 14 줄)입니다.

당신은 말했다

문제는 fn2가 즉시 실행되기를 원한다는 것입니다. 예 : 사용자가 버튼을 클릭하여 무언가를 가져 오면 가져 오기 또는 Ajax를 수행하는 기능이 즉시 실행되기를 원합니다. redux-thunk를 사용하면 함수를 디스패치하면 즉시 실행됩니다.

당신 말이 맞습니다, 당신 은 그것이 즉시 실행되기를 원하지만, 수동으로 함수를 호출하고 디스패치를 ​​전달하는 사람이되기를 원합니까, 아니면 Redux Thunk가 당신을 위해 그것을하기를 원합니까?

어쨌든 Redux는 나중에 작업을 발송해야합니다. Redux Thunk는 "나중에"작업을 수행합니다.

다음 차이점을 고려하십시오.

const store = {
  dispatch() {
    console.log("Dispatch");
  }
};

// Action creator that retuns an action
const inc = () => ({
  type: "INCREMENT"
});

// Impure action creator that you shouldn't use
const badAsyncInc = () => {
  setTimeout(() => {
    store.dispatch({
      type: "INCREMENT"
    });
  }, 1000);
};

// Action creator that returns a function that takes dispatch as arg
const aInc = () => dis => setTimeout(() => dis({
  type: "INCREMENT"
}), 1000);

/*
 * The following will do everything including waiting to dispatch
 * and dispatching to the store.  That's good, but not good for
 * when we want to use a different store.
 */
badAsyncInc()();

/*
 * The following is the "manual" way of wiring up the delayed
 * dispatch that you have to do without Redux Thunk.
 */
aInc()(store.dispatch);

/*
 * With Redux Thunk, this will call the "fn2" immediately but also
 * pass the dispatch function to "fn2" for you so that you don't 
 * have to wire that up yourself.
 */
store.dispatch(aInc);

이 경우, 당신은 당신을 부를 badAsyncInc것이기 때문에 당신은 단지 전화 하고 끝낼 store.dispatch수 있습니다. 하지만 여러 매장이 있다면 어떨까요? 테스트 하네스 매장을 사용하려면 어떻게해야합니까? 상점을 완전히 조롱하고 싶다면? 당신 badAsyncInc은 이제 액션 제작자에게 나쁜 상점과 결합되었습니다.

또는 aInc자신을 호출 하고 디스패치 함수를 전달할 수 있습니다. 그러나 다른 모든 액션 제작자가 아마도 store.dispatch(actionCreator()). Redux Thunk는 비동기 작업에서도 해당 패턴을 유지하는 데 도움이됩니다.

Redux Thunk는 느슨하게 결합되고 테스트 가능한 액션 제작자를 작성하도록 도와줍니다.