Использование одного магазина для нескольких элементов того же типа

Question

Предположим, у меня есть два вида контроллера - ItemsContainer, Item и магазин ItemsStore, в котором хранится список товаров. Когда список элементов изменяется из-за какого-либо действия, хранилище испускает изменения, и оба представления получают свое состояние от ItemsStore.

ItemsContainer звонки getItems и список перечней позиций. Item вызывает метод getItem с его идентификатором и сам редертинг.

Теперь, что является самым простым способом позволить мне иметь несколько ItemsContainer на экране?

я могу переписать ItemsStore, так что она хранит свои данные в карте id -> storeData, но это будет означать, что каждый ItemsStore методу будет нужен еще один параметр storeId также переданной ей. getItems() будет getItems(storeId), getItem(itemId) будет getItem(storeId, itemId) который выглядит слишком уродливым. Действия также потребуют прохождения storeId.

Another way, как я понял, делает магазин, который будет управлять данными ItemsStore, и повторно инициализировать его, вызывая STORE_UPDATE действие.

Проблема с этим методом есть, если мы имеем два (A и B) ItemsContainer «S, и активный контейнер представляет собой, так что ItemsStore содержит элементы, которые предоставляются в А, контейнер Б будет все еще слушать ItemsStore изменений , Я могу добавить проверку, если это активный контейнер в методе ItemsContainer.onChange, но я не уверен, что так оно и должно быть сделано.

Answer 1

Было бы полезно, если бы вы могли добавить свои компоненты здесь, чтобы мы могли видеть, как вы их организуете. Говоря это, я собираюсь взять удар, как бы я это структурировал.

Если бы я сделать среагировать/приложение потока, который имел несколько списков, содержащих элементы, каждый с отдельными пунктами я хотел бы сделать что-то вроде этого:

верхнего уровня компонент контроллера вида: ItemsApp Дитяти ItemsApp : ItemsList Child of ItemsList: Элементы

ItemsApp будет компонентом, который извлекает состояние из магазина. В магазине у меня будет listOfItems, который представляет собой массив объектов, каждый объект, представляющий отдельный элемент, с «именем» и «категорией». Предположим, что некоторые предметы имеют категорию «красный», а другие «синие».

Так, itemsApp получает это состояние из магазина и передает все элементы вплоть до отдельных 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 в своем недавно отфильтрованном списке, возвращая некоторый JSX для каждого элемента, передавая имя и категорию элемента, а затем ваш компонент Item не делайте ничего, кроме рендеринга <li className={this.props.category}>{this.props.name}</li>, или независимо от того, что вы хотите, чтобы ваша разметка была.

Надеюсь, это поможет.