小编Mil*_*ant的帖子

Redux:从Component请求成功或错误流程(使用redux-saga)

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

我的存储设置使用redux-saga进行副作用处理,我从一个组件调度一个动作(具有异步副作用),现在希望组件在处理副作用后执行某些操作(例如导航到另一个路径) /屏幕,弹出模态/吐司或其他任何东西).

此外,我想显示加载指示器或失败时的任何错误.

在redux之前,这种流程是直截了当的,它看起来像这样:

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

Run Code Online (Sandbox Code Playgroud)

使用redux,我通常希望调度启动流的操作并在商店中包含所有相关信息,以允许许多组件收听正在发生的事情.

我可以有3个动作,"请求","成功","失败".在我的组件中,我将发送请求的操作.负责任的传奇将在处理"请求"时发送"成功"或"失败"行动.

我的组件将反映变化.但我还没有找到一种标准的方法来确定行动是否已经完成.也许商店没有因为异步操作而更新(NO-OP,但加载状态仍然会改变我猜).但是行动仍然成功,我想做一些事情,比如导航到另一个屏幕.

我真的尝试在redux docs,redux-saga docs或Stackoverflow/Google中找到这种(看似常见的)场景,但没有成功.

注意:同样使用redux-thunk我认为这种行为很容易实现,因为我可以直接执行异步操作调度并接收成功操作或catch中的错误操作(如果我错了,请纠正我,永远不要真的用过thunk).但我还没有看到与redux-saga相同的行为.

我想出了3个具体的解决方案:

最原始的解决方案,只处理组件中的"成功"/"失败"操作.现在这个解决方案我不是一个忠实的粉丝.在我的具体实现中,没有任何操作表明异步请求已经启动.副作用在Component中处理,而不是在传奇中被抽象出来.很多潜在的代码重现.
在发送请求操作之前运行一次性传奇,相互竞争"成功"/"失败"操作,并允许对第一个发生的操作做出反应.为此,我写了一个助手,摘录了传奇的运行:https://github.com/milanju/redux-post-handling-example/blob/master/src/watchNext.js 这个例子我很喜欢超过1.因为它简单而且具有说服力.虽然我不知道在这样的运行时间创建一个传奇是否会产生任何负面影响,或者可能还有另一种"正确"的方式来实现我在使用redux-saga所做的事情？
将与操作相关的所有内容(loading,successFlag,error)放入存储中,并在componentWillReceiveProps中对操作更改做出反应((!this.props.success && nextProps.success))表示操作已成功完成).这与第二个示例类似,但适用于您选择的任何副作用处理解决方案.也许我正在监督一些事情,比如检测到一个成功无法工作的行为如果道具非常快,道具进入componentWillReceiveProps将"堆积"并且该组件完全跳过从非成功到成功的过渡？

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

我希望对我用来处理所描述的动作流程的方法有一些输入.