区分 Flux 中的存储更改？

Posted 2023-02-22

【中文标题】区分 Flux 中的存储更改？

【英文标题】：Differentiating between store changes in Flux?

【发布时间】：2015-07-05 01:38:07

【问题描述】：

我有两个视图 (A, B) 监听一个存储 (S)，所以如果存储发生变化，它会对两个视图发出更改。

假设A 和B 都发送操作（分别为X 和Y）以更新S。 A 应该更新 X 所做的更改，但不会更新 Y 的更改，反之亦然 B。

但是，由于竞态条件，我不知道X 或Y 完成什么顺序，因为S 只是发出更改而没有区分更改是由X 还是Y 引起的，不知道是更新A还是B。因此，当S 发出更改事件时，我将如何使用Flux 确定要更新哪个视图（A 或B，即发生了哪个操作[X 或Y]？） ?

【问题讨论】：

确保你的状态是不可变的，然后比较shouldComponentUpdate中的this.props和nextProps。

@glortho 我不确定这与我的问题有何关系。我已经更新了我的问题，希望能更清楚一点。

能否提供代码示例？ glortho 指的是您不需要知道它是由哪个操作引起的。 store 应该改变全局状态，React 应该能够根据不同的状态找出需要改变的地方。

【参考方案1】：

在商店中为X 和Y 注册两个不同的操作处理程序。在商店中设置lastChangeFrom 字符串属性分别等于'x' 或'y'。

然后，检查 React 组件的 shouldComponentUpdate(nextProps, nextState) 函数中的 nextProps.store.lastChangeFrom 属性：

// Component A
// listens for changes from action X
React.createClass(
    // ...


    shouldComponentUpdate: function(nextProps, nextState) 
        return nextState.lastChangeFrom == 'x';
    

    // ...
);

// Component B
// listens for changes from action Y
React.createClass(
    // ...

    shouldComponentUpdate: function(nextProps, nextState) 
        return nextState.lastChangeFrom == 'y';
    

    // ...
);

这样，组件A 和B 都会从商店接收更新，但只有在来源是各自的操作时才会处理它们。

请记住，商店本身仍会反映所有更新，无论它们的原始操作如何。例如。多次从Y 触发不同的更新，然后从X 触发另一个更新，会将所有中间更新的存储状态应用到组件A。

此答案假设您使用的是Facebook's flux dispatcher / pattern。其他通量库（例如 flummox）可能表现不同，例如来自商店的更改将通过nextProps 而不是nextState 进行。

【参考方案2】：

您可以尝试将 EventEmitter2 用于允许命名空间事件的 Store。商店可以发出一个 change.x 来响应 X 动作，而 change.Y 来响应 Y 动作。同样，您的视图 A 和 B 现在可以区分更改事件。