Question

我有两个视图（A，B），它们会监听商店（S），因此如果商店发生更改，它会向两个视图发出更改。

假设A和B分别发送操作（X和Y）来更新S。我要A更新X所做的更改，而不是Y的更改，反之亦然B。

但是，由于竞争条件，我不知道X或Y的订单是什么，因为S只是发出更改而不区分更改是否由{{X引起1}}或Y，我不知道是更新A还是B。因此，当S发出更改事件时，我如何能够确定要更新的视图（A或B，即发生了哪些操作[X或{{ 1}}]？）使用Y？

Answer 1

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

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

// 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进行。

Answer 2

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

区分Flux中的商店变化？

2 个答案: