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

Question

我正在使用 React、redux 和 redux-thunk 有一组查询，我必须在 "logic layer" 中运行。每个 "action" 调用的结果决定了我选择的路径，所以我实际上是在等待 return 从 dispatch 调用到 redux-thunks 的承诺。

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 state prop，然后再次等待直到重新渲染（可能）放入是非常尴尬的"bar" 在 redux 状态等...

我以前从未真正见过这种模式，尽管我见过 waiting void promises return 来自 thunks。

是否可以接受 return 来自 redux-thunk 操作的值并使用它而不是从 redux 状态选择器获取值？这好像违反了规则了"single source of truth."如果不行怎么办？

Answer 1

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

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

但这也意味着我必须冗余地调用一些方法来检索全新的 Promise await for - 因为 promises 只能解决一次 - 以便等待一些数据加载。一旦某些操作触发了几个 API 调用，我就结束了等待我什至不需要的数据。

相反，如果我们只依赖 redux 中的数据，它会像 const isStillLoading = props.isData1Loading && props.isData2Loading

一样简单

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

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

Await value returned from a redux-thunk dispatch rather than using state

reactjs

redux

redux-thunk

react-redux