Flux：用于设置存储监听器的高阶组件

Question

在这篇文章 Mixins Are Dead. Long Live Composition 之后，我设置了一个 Pet 组件来监听 pet 和 owner store user 一个更高阶的组件。但是如何将宠物资源中的 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                                        
  };
});

Answer 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
  };
});

Flux：用于设置存储监听器的高阶组件

Flux: Higher order components to set up store listeners

flux

reactjs

reactjs-flux