我不明白带有链接的 redux thunks 的执行流程

Question

这是一个来自easy easy文档的示例代码，但是同样的问题也适用于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在存储中保存待办事项(更改存储)。更改存储将触发订阅组件的重新呈现。那么，"然后"是怎么做到的呢?逻辑执行吗?
2. 假设保存todo不会立即重新呈现组件，而是在执行&;then&;中的逻辑之后。如果我想在保存待办事项时显示加载旋转器，然后执行history.push…，该怎么办?

Answer 1

顺序为:

1. 组件调用saveTodo()
2. 我假设saveTodo函数已经包装了对dispatch的实际调用，因此在内部运行dispatch(actualSaveTodoThunkActionCreator())。这将创建一个新的"think函数"。并传递给dispatch。
3. 中间件看到"动作";实际上是一个笨重的函数，阻止它继续前进，并调用它:https://redux.js.org/usage/writing-logic-thunks#how-does-the-middleware-work
4. 坦克的主体运行，并返回一个Promise
5. 中间件返回承诺。
6. 返回的Promise通过任何其他中间件传递回来，最后从原始dispatch()调用返回
7. useCallback()中的代码获得Promise，并在其上链一个.then()调用
8. 正常的承诺解决发生在未来的某个时刻。
9. Promise被解析后，内部调用.then()回调。

对于第二个问题，您可以在分派之前和分派之后在组件中设置加载状态:

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