等待从 redux-thunk 调度返回的值，而不是使用状态

Question

我正在使用 react、redux 和 redux-thunk 有一组我必须在“逻辑层”中运行的查询。每个“action”调用的结果决定了我采取的路径，所以我实际上在等待从 dispatch 调用返回给 redux-thunk 的 promise。

const handleClick = async (args) => {
  let foo = await dispatch(fetchFoo(args));
  if(foo) { do something... }
  else {
    let bar = await dispatch(fetchBar(args));
    if(bar) { do another thing... }
    else { or do another thing... }
   }
};

thunk 示例：

export const fetchFoo = args => async (dispatch) => {
  let foo = await api.fetchFoo(args);
  dispatch(fetchSuccess(foo));
  // !!!!!!!!!!
  return foo;
  // !!!!!!!!!!
}

如果我不这样做，等到重新渲染（可能）将“foo”放入 redux 状态道具，然后再等到重新渲染（可能）将“bar”放入，这是非常尴尬的redux 状态等...

我以前从未真正见过这种模式，尽管我已经看到等待 void 承诺从 thunk 返回。

是否可以从 redux-thunk 操作返回值并使用它而不是从 redux 状态选择器中获取值？这似乎打破了“单一事实来源”的规则。如果没有，我该怎么办？

Answer 1

使用这种方法，重构状态和更改数据加载方式会变得更加困难。假设要求发生变化，fetchBar() 应该按间隔调用，或者需要由父级加载并通过道具传递。或者你想限制加载。或者缓存数据一段时间。

我使用了这个模式并返回了Promise，发现它让事情变得相当复杂。我发现的唯一优势：我不需要在 redux 存储中使用 isLoading 或 loadingError 标志来知道数据是否已经加载。

但这也意味着我必须重复调用一些方法来检索全新的 Promise 等待 - 因为承诺只能解决一次 - 以便等待一些数据加载。一旦某个动作依次触发了少量 API 调用，我就以等待我什至不需要的数据结束。

相反，如果我们只依赖redux 中的数据，那将像const isStillLoading = props.isData1Loading && props.isData2Loading 一样简单

考虑将数据加载到动作本身的移动条件。如果您发现 API 调用序列变得过于复杂，您可以切换到 redux-saga 或 redux-loop，它们都可以更好地控制执行流程。