集成React,Redux,Redux-Form和React-Saga的最佳方法是什么?

时间:2018-02-01 01:29:48

标签: reactjs react-redux redux-form redux-saga

我已经阅读了关于如何一起使用react-saga和redux-form的所有内容我已经陷入了十字路口,需要一些建议。

以下是我最终的结果。

我选择使用Redux,因为它对我的应用程序有意义,我没有任何问题。

从Thunk切换到Sagas

我开始处理异步api调用,用数据填充我的应用程序。我正在使用大量的数据网格而且我不确定在哪里我会因为一些查询非常复杂而导致延迟。

当我开始研究动作创建者和进行数据背景轮询的方法时,我意识到Sagas比Thunk更容易。

我做了那个开关,我很高兴。处理api调用中的任何错误都由一个动作创建者处理,该动作创建者为我的所有api调用更新redux状态容器。通过基于这些状态更改填充模式来显示错误。

Redux-Form的介绍

一旦我开始将表单数据发布回API,我就会发现有趣的事情,我意识到我要编写大量代码来通过Redux处理它。 Redux形式简化的东西,因为它有一个状态容器,用于相关的所有形式,并使得在客户端设置和验证表单非常容易。

Redux-form处理我的配置中的所有表单状态,直到提交表单。

我正在使用一个容器组件连接到我创建的Redux存储,以保存api请求的状态。

表单是容器的子组件,通过redux-form连接到Redux,它处理所有状态。

当提交表单时,我正在调用Redux操作,该操作又称为saga来发布数据。

saga api调用的结果是在Redux中调度成功或失败操作。我将一个对象传递给api状态,该状态包含状态(成功/失败),一个包含任何错误的错误对象,以及一个返回对象,我可以在其中返回刚创建的记录的id等内容。

当api的错误与通信相关时,这很有效。因为我正在更新api状态,所以我的更高级别的应用程序组件可以访问它,所以我可以做一些事情,比如触发模板以查找与表单数据本身无关的错误。

但是当我开始考虑如何处理任何可能发生的字段错误时,如果客户端验证丢失了某些逻辑,我就迷失了。

在我当前的设置中,这些错误将出现在api状态对象上。我可以把它们放到一个模态中,但是在表单本身上没有客户端错误处理。

Redux-form可以处理直接绑定到表单字段的服务器端验证,但只能从一个承诺和我可以告诉的尝试通过动作创建者返回一个承诺,如果不是不可能的话很难。

我可以在onSubmit函数中写一个promise但是我必须直接调用我的saga函数而不是通过动作触发它。这是一种可接受的模式吗?

我想我可以从传奇中触发一个动作来填充我的api状态值,但它似乎倒退了。

基本上我更喜欢以一种方式处理通信错误(通过我的api状态容器)并以另一种方式形成字段数据错误(通过redux-form和它的错误处理程序),我不知道要采取哪种方向。< / p>

我查看了一个模块redux-form-saga,它可以直接将一个promise返回给表单,因此在api调用之后使用redux-form错误处理,但我不确定我是否能够也同时触发我的api状态动作。

而不是继续走下兔子洞并且可能过度复杂化的事情,我认为我会向任何不得不处理类似事情的人征求一些建议。

我很擅长使用异步后台调用来填充我的数据网格,但是当我必须将数据发回到api时,我想确保用户在收到回复之前不能采取任何其他操作。

这是此应用程序中许多内容的第一部分,因此我想创建一个有意义,易于重现,可靠且易于遵循的设计模式。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

  

React-Boilerplate将帮助您整合React,redux,redux-saga。除此之外,整合redux-form应该是直截了当的。 React-Boilerplate使用社区的所有当前最佳实践来生成现成的应用程序