如何使redux-form(或Redux)在本地数据库中运行良好?

时间:2016-10-03 17:52:17

标签: reactjs redux redux-form

这几天或几周(阅读文章,观看视频/会谈)我试图了解如何正确使用Redux和redux-form,但它真的很难我要完全掌握这个概念。也许我的用例不太适合Redux,或者我只是遗漏了一些明显的东西。

我试图找到的是大型应用程序的良好基础。我对React非常有信心,但Redux(因此,还原形式)似乎是解决我没有的问题的好方法。尽管如此,每个人都赞扬Redux(或flux)的概念,所以我想确保我不会错过任何东西。

嗯,该应用程序非常数据库驱动浏览器中随时可用的所有数据(它是离线优先应用程序)。

我使用浏览器内的数据库非常类似于 NeDB加上Mongoose - 就像ODM一样,但实际上数据库是(另一种)自定义一旦它足够稳定我想要开源的项目(我已经已经实现了它,到目前为止它非常好用。)

  

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

作为用户界面的前端我使用 Material UI

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

为了便于理解,请参阅此快速MockupUI sketch

左边的列表使用React和上面描述的实时查询非常容易。它也"反应"因为它总是与数据库同步。但是,它目前还没有使用Redux。我不确定这是不是坏事。

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

我喜欢redux-form(v6)概念,但我无法弄清楚如何将文档数据提供给表单。我知道有initialValues但我无法理解如何正确使用它。

我想我需要以某种方式将文档数据推送到Redux中,以便它反映在表单中。我是否需要"开始" Redux动作将数据推送到商店?

另一方面,使用经典的React state 将文档(一个简单的JS对象)从列表传递到我的表单组件对我来说简直太简单了。 目前我没有看到在Redux商店中拥有全局表单状态会带来任何好处。但是,我可能需要其他东西而不是redux-form(无法找到可比的东西)。

Redux与我的数据库对我来说似乎也是多余的,因为最终它们都是全局数据存储。

已经将Redux用于与数据库内容无关的少数状态,如应用程序状态指示器和切换全局drawer。我还使用redux-router(并且最终希望将当前列表选择链接为唯一URI )。然而,我很难找到Redux与数据库/数据库相关组件之间的谐波链接。

所以,我的问题最终是:实现这些应用程序部分的合理方法是什么? Redux与否Redux?在任何一种情况下:它如何实施?

2 个答案:

答案 0 :(得分:0)

如果您的所有数据在本地同步或多或少,则Redux可能不适合您的应用程序。

但是,如果您想使用Redux Form,它提供了很多开箱即用的表单状态管理,您将需要使用Redux,即使您只将它用于Redux Form reducer。

要初始化表单,您可以通过initialValues道具将值传递到已修饰的表单组件,也可以自己调用dispatch(initialize(formName, formValues))

答案 1 :(得分:0)

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

基本思想是: 1)将Redux保存到浏览器存储中并进行补水(从存储重新加载到Redux存储) 2)向redux存储添加新分支,以实现请求的传出队列。任何异步XHR操作都会将请求添加到队列中。队列请求将在用户联机或重新联机时发送,如果由于网络状况而失败,将重试