reactjs - 如何在React/Flux中实现导航 Controller /标签栏 Controller ？

Question

我正在使用 React 创建 SPA 移动应用程序。我想知道如何使用 Flux 方式创建导航 Controller 或选项卡栏 Controller 。基本上我想知道如何处理 child 的所有权以及谁/什么处理实际的过渡。

现在我有一个 navigationController 组件，它有一个 push 方法来将页面添加到堆栈中并将它们转换为我们的输出。所有这些都存储在状态中，父组件对此一无所知。

对于我的选项卡栏 Controller ，父组件传入一些 tabBar 项目，其中 tabBar 项目的子项作为选项卡处于事件状态时显示的内容。选项卡栏 Controller 处理选项卡何时处于事件状态以及根据事件选项卡显示哪些内容。家长不知道哪个选项卡处于事件状态。事件选项卡存储在选项卡栏 Controller 的状态中。

像这样的东西在 Flux 中似乎不容易实现。我如何从父级告诉导航 Controller 添加元素，然后处理 Controller 内的转换。另外，如果添加到 Controller 的页面必须一直到达根目录，那么它们如何能够推送新页面？

我想我的问题可能是我没有完全理解 Flux。

任何帮助将不胜感激。

Answer 1

听起来您在组件中做了太多事情。实现 Flux 架构的方法有很多种，但通常最简单的一种方法是假设您几乎从不使用状态，只使用 props。有关哪些选项卡可用以及哪些选项卡处于事件状态的所有逻辑都将进入 React 组件外部的 TabStore 中。基本的通量流可能是这样的:

• TabStore 保留选项卡和内容的内部列表，并跟踪 activeTab。它公开了像 .getTabs() 这样的方法来允许 View 访问当前状态。它还公开 EventEmitter 方法以允许其发布更改。

• 应用程序中的根组件设置一个监听器来监听选项卡存储中的更改。最简单的版本是这样的:

  _onChangeTabStore: function() {
      this.setState({
          tabs: TabStore.getTabs(),
          activeTab: TabStore.getActiveTab()
      });
  },
  

• 根组件然后将 tabs 和 activeTab 作为 props 传递给您的 TabBar 组件。它还可能传递一个处理程序，例如:

  onTabClick: function(clickedTab) {
      TabActions.setActiveTab(clickedTab);
  },
  

• TabActions.setActiveTab 将通过 AppDispatcher 分派(dispatch)操作。请参阅the Flux docs了解更多详情。

• TabStore 处理 setActiveTab 操作，并更新其内部状态。如果事件选项卡已更改，则会发出更改事件。

• 根组件接收更改事件，更新状态，并将新的 props 传递给 TabBar。

这里没有任何 React 组件跟踪自己的状态 - 这是存储的工作。这使得业务逻辑和 View 之间保持了真正清晰的分离。它还避免了任何“父级如何知道选择了哪个选项卡”的问题，因为父级也正在接收选项卡状态。