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

【问题标题】：How can a unique instance of a React component respond to the result of an async action using Flux?React 组件的唯一实例如何使用 Flux 响应异步操作的结果？
【发布时间】：2017-10-09 19:34:14
【问题描述】：

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

如果从这些组件之一触发操作，则该组件需要独立处理最终响应，与它的同级组件分开。

例如：

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

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

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

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

有没有更好的办法？

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

编辑：更多资源：

【问题讨论】：

我的第一个解决方案看起来像 Fluxxor 的（旧的？）way of handling this issue，而第二种方法是 Facebook 推荐的标准容器组件策略1 2

标签： reactjs flux

【解决方案1】：

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

您的商店应该有一个哈希值，这些哈希值对应于不同子组件的最终状态，在某种 id 上进行哈希处理。

那个商店的状态可能是这样的；

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

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

那个容器应该有一个函数来查找每个孩子的正确颜色，例如；

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

然后该容器应该呈现；

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

【讨论】：