React组件的唯一实例如何使用Flux响应异步操作的结果？

Question

我在同一页面上呈现了同一组件的多个实例。这些组件中的每一个都具有相同的行为并调用相同的操作。被调用的操作是异步的，等待来自API的响应（之后创建更多操作，以便响应可以被存储使用）。

如果某个操作是从其中一个组件触发的，那么该组件需要从其兄弟中处理最终的隔离响应。

例如：

• 在页面上呈现三个相同的按钮
• 单击按钮将创建一个异步查询API并使用响应的有效负载调度新操作的操作（true）
• 收到此回复后，点击的按钮需要变为蓝色
• 未点击的按钮必须不受影响。

我如何以React / Flux方式实现这个简单的例子？

想到的直接解决方案是为组件分配唯一标识符，将该ID与操作一起传递，并在商店中侦听该特定ID以指示是时候变蓝。

另一个解决方案是将每个渲染组件中的“颜色”状态提升到它们的容器并在商店中镜像它（即，在商店中有button1Color，button2Color，...）。缺点是任何添加按钮都需要在商店中拥有自己的状态变量（更脆弱！）。这是更好的选择吗？

有更好的方法吗？

Flux store emitting changes to specific react components rather than all components.也提到了这一点，但我不相信有明确或令人满意的答案。

修改：更多资源：

• http://briandipalma.github.io/flux-for-components/
• https://medium.com/front-end-development-2/multiple-components-in-flux-acd73d8fceef

Answer 1

我认为你不必要地将问题的正确答案分成两半，并争论使用哪一半。你应该同时使用它们。

你的商店应该有一个与不同子组件的最终状态相对应的值的散列值，并在某种id上进行散列。

该商店的状态可能类似;

{
    id_1: {
        //api response object
    },
    id_2: {
        //api response object
    },
    ...
}

然后你需要一个容器，其工作是从flux存储中获取数据，并解析它以为其子组件提供适当的道具。

该容器应该有一个函数来执行查找以找到每个孩子的正确颜色，例如;

getColor: function(id) {
    return this.props.flux_store[id].some_value == 'condition' ? 'red' : 'green';
}

然后该容器应呈现;

<SubComponent color={this.getColor('id_1')} key='id_1' />