时间戳

首页 > 解决方案 > 我不明白 redux thunk with chaining 的执行流程

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

问题描述

这是来自easy peasy docs的示例代码，但同样的问题也适用于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 ...”怎么办？

标签： reduxreact-reduxeasy-peasy

解决方案

顺序是：

  1. 组件调用saveTodo()
  2. 我假设的saveTodo函数已经包装了对 的实际调用dispatch，因此在内部运行dispatch(actualSaveTodoThunkActionCreator())。这会创建一个新的“thunk 函数”并将其传递给dispatch.
  3. thunk 中间件看到“动作”实际上是一个 thunk 函数，阻止它继续前进，并调用它：https ://redux.js.org/usage/writing-logic-thunks#how-does-the-middleware -工作
  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

推荐阅读