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

Question

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

如果这些组件之一触发了操作，则该组件需要处理最终响应与它的兄弟组件隔离。

例如：

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

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

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

有没有更好的方法？

Flux store emitting changes to specific react components rather than all components. 中也有人问过这个问题，但我认为没有明确或令人满意的答案。

编辑： 更多资源：

Answer 1

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

您的商店应该有对应于不同 sub-components 最终状态的值的散列，散列在某种 id 上。

该商店的状态可能如下所示；

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

然后您需要一个容器，其工作是从通量存储中获取数据，并对其进行解析以提供具有适当属性的 child 组件。

该容器应该有一个函数，可以查找每个 child 的正确颜色，例如；

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

然后该容器应该呈现；

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

How can a unique instance of a React component respond to the result of an async action using Flux?