我不明白 redux thunk with chaining 的执行流程

Question

这是来自 easy peasy 文档的示例代码，但同样的问题也适用于 redux-toolkit 中的 createThunk：

function MyComponent() {
  const saveTodo = useStoreActions(actions => actions.todos.saveTodo);
  const onSaveClick = useCallback(
    // We chain on the promise returned by dispatching the thunk
    //                                  ????
    () => saveTodo('Learn easy peasy').then(() => {
      // redirect on success
      history.push('/done');
    }),
    [saveTodo]
  );
}

1. 假设 saveTodo 将待办事项保存在商店中（更改商店）。更改存储会触发订阅组件的重新呈现。那么，“then”逻辑是如何执行的呢？
2. 假设保存待办事项不会立即重新渲染组件，而是在执行“then”中的逻辑之后。如果我想在保存待办事项的同时显示加载微调器，然后执行“history.push...”怎么办？

Answer 1

顺序是：

1. 组件调用saveTodo()
2. 我认为saveTodo 函数已经包含了对dispatch 的实际调用，因此在内部运行dispatch(actualSaveTodoThunkActionCreator())。这将创建 a new "thunk function" 并将其传递给 dispatch。
3. thunk 中间件看到“动作”实际上是一个 thunk 函数，阻止它继续向前，并调用它：https://redux.js.org/usage/writing-logic-thunks#how-does-the-middleware-work
4. thunk 的主体运行，并返回一个 Promise
5. thunk 中间件返回该 Promise。
6. 返回的 Promise 通过任何其他中间件传回，最终从原来的 dispatch() 调用返回
7. useCallback() 中的代码获取 Promise，并在其上链接 .then() 调用
8. 正常的 Promise 解决方案发生在未来的某个时间点。
9. Promise 在解决后会在内部调用.then() 回调。

根据第二个问题，您可以在调度之前和之后在组件中设置加载状态：

https://redux.js.org/tutorials/essentials/part-5-async-logic#checking-thunk-results-in-components