reactjs - Redux:请求成功或来自组件的错误(使用redux-saga)

Question

这是我尚未找到标准解决方案的一件事。

我使用redux-saga进行了商店设置以进行副作用处理，我从组件调度了一个 Action (具有异步副作用)，现在希望该组件在处理了副作用后可以执行某些操作(例如，导航到另一条路线)/屏幕，弹出模态/ toast 或其他任何内容)。

我也想显示一个加载指示器或任何失败的错误。

在进行redux之前，这种流程很简单，看起来像这样:

try {
  this.setState({loading: true});
  const result = await doSomeRequest();
  this.setState({item: result, loading: false});
} catch (e) {
  this.setState({loading: false, error: e});
}

使用redux，我通常希望调度一个 Action 来启动流程并在商店中存储所有相关信息，以允许许多组件监听正在发生的事情。

我可以执行3个操作:“请求”，“成功”，“失败”。
在我的组件中，我将分派(dispatch)请求的操作。
然后，负责任的传奇将在处理“请求”时调度“成功”或“失败” Action 。

我的组件将反射(reflect)所做的更改。
但是我还没有找到一种标准的方法来判断 Action 是否完成。可能由于异步操作(NO-OP，但存储状态仍会更改)，商店尚未更新。但是该操作仍然成功，并且我想执行类似导航到另一个屏幕的操作。

我确实尝试在redux文档，redux-saga文档或Stackoverflow/Google中找到这种(看似常见的)场景，但是没有成功。

注意:同样，对于redux-thunk来说，我认为这种行为是可以直接实现的，因为我可以在异步 Action 分派(dispatch)上使用.then，然后在catch中接收成功 Action 或错误 Action (如果我做错了，请纠正我，永远不要真的用过重击)。但是我还没有看到用redux-saga实现的相同行为。

我提出了3种具体解决方案:

最原始的解决方案，仅处理组件中的“成功”/“失败” Action 。现在，我不太喜欢这种解决方案。在我的具体实现中，没有任何 Action 指示异步请求已启动。副作用在组件中在那里处理，而不是在传奇中被抽象掉。许多潜在的代码重新排列。

在分派(dispatch)请求操作之前运行一次传奇，这使“成功”/“失败”操作相互竞争，并允许对第一个发生的操作使用react。为此，我编写了一个辅助程序来抽象化传奇的运行:https://github.com/milanju/redux-post-handling-example/blob/master/src/watchNext.js
这个例子我不仅仅喜欢1.，因为它简单且声明式。尽管我不知道在这样的运行时创建传奇会不会带来任何负面影响，或者也许还有另一种“正确”的方法来实现我对redux-saga所做的工作？

将与 Action 相关的所有内容(加载，successFlag，错误)放入存储中，并在componentWillReceiveProps中对 Action 更改使用react((!this.props.success && nextProps.success))表示 Action 已成功完成)。
这类似于第二个示例，但是可以与您选择的任何副作用处理解决方案一起使用。
也许我正在监督某种事情，例如，如果 Prop 很快出现冰雹并且 Prop 进入组件，WillReceiveProps将“堆积”并且组件完全跳过了从不成功到成功的过渡，那么检测 Action 是否成功不起作用？

请随时查看我为此问题创建的示例项目，该示例项目已实现了完整的示例解决方案:https://github.com/milanju/redux-post-handling-example

我希望能得到一些用于处理所描述的 Action 流程的方法方面的信息。

我在这里误会了吗？我想出的“解决方案”根本就不是直截了当的。也许我是从错误的角度看问题。

上面的示例是否有问题？

是否有针对此问题的最佳实践或标准解决方案？

您如何处理所描述的流程？

谢谢阅读。

Answer 1

如果我正确理解了您的问题，则希望您的组件根据您的传奇触发的操作采取措施。这通常会在componentWillReceiveProps中发生-新的 Prop 会调用该方法，而旧的 Prop 仍然可以通过this.props使用。

然后，您将状态(请求/成功/失败)与旧状态进行比较，并相应地处理各种转换。

让我知道我是否误解了。