Flux：设置商店监听器的高阶组件

【问题标题】：Flux: Higher order components to set up store listenersFlux：设置商店监听器的高阶组件
【发布时间】：2015-07-05 06:22:06
【问题描述】：

在这篇文章Mixins Are Dead. Long Live Composition 之后，我设置了一个 Pet 组件来监听宠物，并且所有者为用户存储了一个更高阶的组件。但是如何将宠物资源中的 owner_id 传递给connectToStores？这仅仅是mixins优越的一个例子吗？

Pet = connectToStores(Pet, [PetStore, OwnerStore], (props) => {
  return {
    pet   : PetStore.getOne(props.id),
    owner : OwnerStore.getOne(ownerId), // this should come from pet.owner_id                                        
  };
});

【问题讨论】：

标签： reactjs reactjs-flux flux

【解决方案1】：

PetStore.getOne 是同步的吗？只需将结果分配给变量即可。

Pet = connectToStores(Pet, [PetStore, OwnerStore], (props) => {
  var pet = PetStore.getOne(props.id);

  return {
    pet   : pet,
    owner : OwnerStore.getOne(pet.owner_id),    
  };
});

如果不是同步的，您的商店将需要发出一个更改事件，以在宠物可用时重新渲染组件。该组件还需要以某种方式处理宠物不可用。

Pet = connectToStores(Pet, [PetStore, OwnerStore], (props) => {
  var pet, loaded, owner;

  pet = PetStore.getOne(props.id);
  if (pet) {
    loaded = true;
    owner = OwnerStore.getOne(pet.owner_id);
  } else {
    loaded = false;
    owner = null;
  }

  return {
    pet    : pet,
    owner  : owner,
    loaded : loaded
  };
});

【讨论】：