对同一类型的多个元素使用一个商店

Question

假设我有两个控制器视图 - ItemsContainer、Item 和一个存储项目列表的商店 ItemsStore。当项目列表由于某些操作而发生变化时，商店会发出变化，并且两个视图都从 ItemsStore 获取它们的状态。

ItemsContainer 调用getItems 并重新呈现项目列表。 Item 使用其 id 调用 getItem 方法，并重新呈现自己。

现在，让我在屏幕上显示多个 ItemsContainer 的最简单方法是什么？

我可以重写ItemsStore，以便将其数据存储在映射id -> storeData 中，但这意味着每个ItemsStore 方法都需要另一个参数storeId 也传递给它。 getItems() 变成 getItems(storeId)，getItem(itemId) 变成 getItem(storeId, itemId) 看起来太丑了。操作还需要传递storeId。

据我了解，Another way 正在创建一个商店，它将管理ItemsStore 的数据并重新初始化它，调用STORE_UPDATE 操作。

这种方法的问题是，如果我们有两个（A 和 B）ItemsContainer，并且活动容器是 A，那么 ItemsStore 包含在 A 中呈现的项目，容器 B 仍然会监听到ItemsStore 更改。我可以在ItemsContainer.onChange 方法中添加一个检查它是否是活动容器，但我不确定应该这样做。

Answer 1

如果您可以在此处添加您的组件，这样我们就可以看到您是如何组织它们的，这将会很有帮助。话虽如此，我还是要试一试如何构建它。

如果我要制作一个 react/flux 应用程序，它有多个包含项目的列表，每个列表都有单独的项目，我会做这样的事情：

顶级控制器视图组件：ItemsApp ItemsApp 的子项：ItemsList ItemsList 的子项：Items

ItemsApp 将是从存储中检索状态的组件。在商店里，我会有一个 listOfItems，它是一个对象数组，每个对象代表一个单独的项目，带有“名称”和“类别”。假设有些项目的类别为“红色”，而其他项目的类别为“蓝色”。

因此，itemsApp 从 store 中获取它的状态并将所有项目向下传递给各个 ItemsList 组件，如下所示：

render: function() {
   var red = "red";
   var blue = "blue";

     return (
        <div>
          <ItemsList items={this.state.listofItems} category={red} />
          <ItemsList items={this.state.listofItems} category={blue} />
        </div>
     )
 }

然后，每个 ItemsList 将获取项目列表并对其进行过滤，以仅查找与其传递的类别匹配的项目，如下所示：

render: function() {
     var category = this.props.category;
     var itemsToRender = this.props.items.filter(function(item) {
        return (
             item.category = category
        )
     });

     return (
          <div>
            <Items items={itemsToRender}/>
          </div>
     )
  }

然后，在 Items 组件中：

render: function() {
     var displayedItems = this.props.items.map(function(item) {
        return (
               <li className={item.category}>{item.name}</li>
        )
      });

     return (
         <ul>
          {displayedItems}
         </ul>
     )
   }

根据您希望如何构建代码，您还可以在新过滤的列表上使用 ItemsList 内的 map，为每个项目返回一些 JSX，传递项目的名称和类别，然后您的 Item 组件将除了渲染 <li className={this.props.category}>{this.props.name}</li> 或任何你想要的标记之外什么都不做。

希望这会有所帮助。