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

Question

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

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

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

• Serif（我的路由器路由之一）
  • 子导航
    • TermSelect（这是您在右上角看到的：“Current Term”）
  • 搜索
  • 浏览
  • 日历
    • 日历选择的东西
    • 实际日历

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

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

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

TermSelect 组件使用接收到的道具来填充下拉列表并将其默认显示值设置为列表中的第一个，从而导致您在上面看到“2016 Fall”。选择选项时，调用了作为数据的一部分传递的回调函数，该函数更改了衬线组件的状态。

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

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

谢谢！

Answer 1

我认为你的 React 何时何地与 PouchDB 通信的设计本质上没有任何问题。你的提问很自然，很好！

听起来您的问题在于状态管理。你在管理它吗？

如果你不是：

使用redux。我通常有一个发送的操作，它获取您想要保存的任何信息并将其保存到 PouchDB。这使得 Pouch 通信集中在一个地方，并减轻了您的 React 应用程序需要了解 PouchDB 的压力/知识。

如果你是：

创建一个负责将数据交给 Pouch 的操作。它如何到达那里并不重要（在一定程度上）；这取决于您，也取决于您的应用程序的设计。

看来您正朝着正确的方向前进。这里似乎没有任何异常或明显错误。