如何使Redux表单(或Redux在一般情况下)与本地数据库良好地工作？

Question

几天甚至几个星期(阅读文章、观看视频/演讲)，我正试图理解如何正确地使用Redux和剩馀形式，但我真的很难完全理解这个概念。也许我的usecase不太适合Redux，或者我只是忽略了一些显而易见的东西。

我想找到的是一个大型应用程序的良好基础。我对React很有信心，但是Redux (因此，redux-form)似乎是一个很好的解决方案，解决了我没有的问题。尽管如此，每个人都称赞Redux (或通量)概念，所以我想确保我没有遗漏一些东西。

好的，这个应用程序是高度database-driven的，所有的数据都可以在浏览器中方便地获得(它是一个离线的第一个应用程序)。

我使用的浏览器内数据库非常类似于NeDB加上猫鼬-like ODM，但实际上数据库是一个(另一个)自定义项目，一旦它足够稳定，我就想开放它(我已经实现了它，到目前为止它运行得非常好)。

该数据库的关键点(与这个问题相关)可能是它拥有浏览器中的所有数据，并且它支持"live查询“--这意味着我可以订阅进行数据库更改，并将最新的查询结果直接推送给任何消费组件/处理程序。此外，数据库自动将所有数据与后台的服务器同步(双向)，这意味着集合可以在任何时候更改内容。

作为UI前端，我使用的是材料用户界面。

应用程序本身将管理许多不同的集合，我需要为用户实现许多表单，以便用户能够在特定的集合中编辑单个文档。根据应用程序中的上下文，用户将看到当前集合中所有文档的列表，以及显示该列表中当前选定文档的详细信息的表单。当然，这一表格也将允许对文件进行修改。用户一次可能只编辑(见)一个集合/表单。

为了更容易理解，请参阅这个快速的模拟模型：

​

左边的列表非常容易使用React和上面描述的实时查询。它也是“反应性的”，因为它总是与数据库同步。但是，它目前根本不使用Redux。我不确定这是不是坏的。

单击该列表中的任何项时，详细信息应显示在右侧的表单中。

我喜欢redux (v6)概念，但我不知道如何将文档数据提供给表单。我知道有initialValues，但我不知道如何正确地使用它。

我想我需要以某种方式将文档数据推入Redux，以便将其反映在表单中。我需要“启动”Redux操作来将数据推入存储区吗？

另一方面，使用经典的React状态将文档(一个简单的JS对象)从列表传递给我的表单组件对我来说似乎非常简单。目前，我认为在Redux存储中使用全局表单状态没有任何好处。但是，我可能需要其他东西，而不是redux表单(找不到类似的东西)。

使用我的数据库的Redux对我来说似乎也是多余的，因为最终两者都是全局数据存储。

我已经对一些与数据库内容无关的州使用了Redux，比如应用程序状态指示器和切换全局抽屉。我也在使用redux路由器 (最终希望链接当前列表选择的唯一URI)。然而，我很难在Redux和数据库/数据库相关组件之间找到一个和谐的链接。

因此，我最后的问题是:实现应用程序这些部分的合理方法是什么？Redux还是不Redux在这两种情况下:它如何实现？

Answer 1

如果您的所有数据或多或少都是本地同步可用的，那么Redux可能并不适合您的应用程序。

但是，如果您想要使用Redux表单(它提供了大量的表单状态管理)，那么您将需要使用Redux，即使您只将它用于Redux表单还原器。

要初始化表单，可以通过initialValues支柱将值传递给修饰表单组件，也可以自己调用dispatch(initialize(formName, formValues))。

Answer 2

您可以使用我编写的以下包：https://www.npmjs.com/package/redux-offline-wizard

其基本思想是: 1)将redux存储保存到浏览器存储，然后再水合物(从存储重新加载到redux存储) 2)在redux存储中添加一个新的分支，以实现请求的传出队列。任何异步XHR操作都会将请求添加到队列中。队列请求将在用户联机或返回联机时发送，如果由于网络状况失败，将重新尝试。