我应该如何在我的React + React Router + PouchDB应用程序中构建我的数据流？

Question

我目前正在构建一个名为Serif的课程安排应用程序，它会在首次加载时将课程数据加载到PouchDB中。用户界面如下：

＆＃34;当前期限＆＃34;是一个下拉列表，控制在任何给定时间使用的当前数据集。例如，如果＆＃34; 2016秋季＆＃34;如果选中，则用户可以使用2016秋季目录中的课程搜索，浏览，选择课程和创建日历。当用户切换到＆＃34; 2016 Spring＆＃34;时，他们现在将使用2016 Spring数据集，依此类推。

我使用PouchDB保留所有客户端（至少目前为止）。话虽如此，这是我当前的组件结构（粗略地说，没有仅用于布局的组件）：

• Serif（我的一条路由器路由）
  • Subnav
    • TermSelect（这是您在右上角看到的那个：＆＃34;当前期限＆＃34;）
  • 搜索
  • 浏览
  • 日历
    • 日历选择内容
    • 实际日历

我的问题集中在从PouchDB到TermSelect组件的数据流（但正确的答案将告知我构建所有其他组件）。

我现在已经构建它的方式，Serif有一个名为currentTerm的状态，可以跟踪应用程序的当前术语。在构造函数中，第一个术语查询PouchDB并将currentTerm设置为该值。

在Serif的render方法中，查询PouchDB以查找db中的术语列表，并将该列表格式化为预期格式，然后作为prop传递给Subnav组件，Subnav组件又将其传递给TermSelect组件

TermSelect组件使用收到的道具填充下拉列表，并将其默认显示值设置为列表中的第一个，从而导致＆＃34; 2016秋季＆＃34;你看到上面。选择一个选项时，会调用作为数据的一部分传递的回调函数，这会改变Serif组件的状态。

除了需要点击显示的默认值的问题之外，这主要起作用。这是正确的做事方式吗？ TermSelect组件可以直接从PouchDB查询它，而不是将术语数据从Serif传递到TermSelect组件。

任何改进建议，甚至只是确认这是正确的数据流模式将不胜感激。我是React的新手，我在处理所有正确的模式和反模式时遇到了麻烦（不使用prop设置状态，组件应该将数据从有状态传递到无状态等）。

谢谢！

Answer 1

我认为您在设计React与PouchDB通信的位置和时间方面没有任何内在错误。你的提问很自然，很好！

听起来你的问题在于国家管理。你在管理吗？

如果你不是：

使用redux。我通常会调度一个动作，它会获取您要保存的任何信息并将其保存到PouchDB。这使得Pouch通信可以放在一个位置，它可以减轻您的React应用程序需要了解的关于PouchDB的压力/知识。

如果你是：

创建一个负责将数据传递给Pouch的操作。如何到达那里并不重要（至关重要）;这取决于您，以及您的应用程序的设计。

看起来你正朝着正确的方向前进。在这里似乎没有什么不明显或明显错误。