如何在创建组件时使用 React Flux 在商店中添加和加载对象

Question

问题

当我加载一个 React 组件时，如何将一个对象添加到存储中，然后使用 Flux 模式立即将其加载到组件的状态中？

背景

我有一个 Flux 存储 (TableStore)，它管理名为 Tables 的对象，以及名为 TableList 和 TableEditor 的 React 组件。

TableList 组件列出了 store 中的表，每个 item 都有一个编辑按钮导航到 /tables/editor/:tableId，它加载了TableEditor 组件，TableEditor 通过 tableId 从 store 中获取表在网址中。

TableList 还有一个“创建新表”按钮。导航到/tables/editor/new。当这个 URL 被加载后，我需要在 store 中添加一个新的Table，然后将其加载到TableEditor 的状态中。

使用 Flux 模式，组件不应该直接调用这样的函数；他们应该调用Actions，它将动作发送到商店。不幸的是，如果在组件的getInitialState() 中调用了某个操作，则在组件中执行componentWillMount() 之前 执行商店中的函数，并且该组件错过了来自商店的change 事件，所以我的TableEditor 组件不会从TableStore 加载表。

我认为这是一个非常普遍的需求，所以必须有一个标准的方法来解决这个问题（我希望）。

有什么想法吗？

Answer 1

您可以尝试的一种解决方案是始终在您的表存储中保留一个新的空表对象（或只是一个“空闲”表 ID）。

将 NEW 按钮（或用户为创建新表所做的任何操作）与包含新的空 ID 的 /tables/editor/:tableId 耦合。

这样，您不需要从/new 到/:tableId 等的花哨重定向。

Answer 2

我认为您对通量模式有些混淆。

当我加载 React 组件时，如何将对象添加到商店，以及 然后立即使用 Flux 将其加载到组件的状态中 模式？

如何将对象添加到商店？

您应该始终添加一个对象来存储发出新的创建操作。商店将自己注册到调度程序以侦听操作。当一个动作被调度时，一个处理程序被调用来执行那个动作。这是改变商店状态的唯一方法。例如，在您的情况下，视图应发出 TABLE_CREATE 操作。 TableStore 应该列出表 TABLE_CREATE 并保存新表。一段代码：

表格列表视图

onSave: function(table) {
 TableActions.create(table);
}

表格操作

var TodoActions = {
 create: function(text) {
   AppDispatcher.handleTableAction({
   actionType: TableConstants.TABLE_CREATE,
   table:table
 });
}

表格存储

  switch(action.actionType) {
    case TableConstants.TABLE_CREATE:
      text = action.table();
      if (!isEmpty(table)) {
        create(table);
        TableStore.emitChange();
      }
      break;

如您所见，上面的代码遵循通量模式：

 VIEW --(Action)--> DISPATCHER --(Action)--> STORE

立即使用 Flux 模式将其加载到组件的状态中？

您直接从商店获取。我们可以从视图中读取存储，因为我们没有执行任何状态突变。状态突变应该通过动作来传播。因此，您的组件应该使用函数getInitialState 从TableStore 中读取值。可能，您需要使用某种id。代码：

getInitialState() {
 return { 
  table : TableStore.getTableById(id)
 }
}

---

根据你写的，你有一个包含所有表的商店。 当用户单击按钮时，应将新操作发送到表存储，以便将新表添加到存储中。表存储应该监听这个动作。现在，用户可能会重定向到编辑器页面，在那里他可以编辑新表。编辑表视图从getInitialState 中的存储中获取值并重新进行编辑。有意义吗？