Question

问题

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

背景

我有一个Flux商店（TableStore）来管理名为Tables的对象，以及名为TableList和TableEditor的React组件。

TableList组件会列出商店中的表格，每个项目都有一个导航到/tables/editor/:tableId的编辑按钮，用于加载TableEditor组件，TableEditor获取商店中的表格通过URL中的tableId。

TableList还有一个＆＃34;创建新表＆＃34;按钮。导航到/tables/editor/new。加载此网址后，我需要向商店添加新的Table，然后将其加载到TableEditor的状态。

使用Flux模式，组件不应该直接调用这样的函数;他们应该致电Actions向商店发送行动。不幸的是，如果在组件getInitialState()中调用某个操作，则在组件中执行 componentWillMount()之前，执行商店中的功能，并且组件未命中来自商店的change事件，因此我的TableEditor组件无法从TableStore加载表格。

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

有什么想法吗？

Answer 1

我认为你对助焊剂模式有点混淆。

当我加载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中的商店中获取值并重新编辑。有意义吗？

Answer 2

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

将NEW按钮（或用户所做的任何事情来创建新表格）耦合到保存新空ID的/tables/editor/:tableId。

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

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

问题

背景

2 个答案: