监听特定的 Store 属性变化

Posted 2023-02-22

【中文标题】监听特定的 Store 属性变化

【英文标题】：Listen for a specific Store property change

【发布时间】：2017-04-19 18:42:56

【问题描述】：

我有一个初始状态设置为等于存储状态的组件。此外，该组件还订阅了 Store 中发生的任何更改。

// Inital component's state is set to be equal to a Store state
constructor(props) 
    super(props);
    this.state = EntityStore.getState();
    this.entitiesOnChange = this.entitiesOnChange.bind(this);


// Subscribe to any Store's change
componentDidMount() 
    EntityStore.listen(this.entitiesOnChange);


// Update the state with the new one
entitiesOnChange(nextState) 
    this.setState(nextState);

我的目标是为组件订阅 Store 的特定属性。

我尝试检查entitiesOnChange，但我发现this.state 已经与商店的状态（nextState）保持同步。同样在以下代码示例中（我尝试过的）this.setState(nextState) 没有被调用，因为两个状态是相等的，因此不会发生重新渲染：

// Update the state with the new one only if a specefic `propery` is changed
entitiesOnChange(nextState) 
    // Here is the problem. `this.state` is already up to date.
    if (this.state.property !== nextState.property) 
        this.setState(nextState);
    

那么我如何才能将我的组件订阅到特定商店的属性？

【问题讨论】：

您的代码中是否还有其他地方可以更新 EntityStore 更改的状态？

我有，但在不同的组件中（不是上面问题中使用的组件）。

那么状态怎么可能已经是最新的了？你确定你的 nextState 属性真的包含 nextState 吗？ （不是当前的）

这就是重点。我也想知道。我将尝试通过 jsFiddle 重现它。

@PiotrSołtysiak 感谢您的支持。我已经查明发生了什么。有兴趣的可以看看下面的答案。

【参考方案1】：

好的！我深入调查了这个问题，最后我发现了发生了什么。该问题是由于在商店中设置数据的错误方式引起的。它发生了变异（这是错误的）。正确的（通量）方式是创建一个新对象。

我创建了一个JSFiddle 来说明整个问题，但这里是商店中错误突变的亮点：

class Store 
    constructor() 
        this.bindActions(actions);
        this.data = 
            items: [],
            isLoading: false
        ;
    

    set(items) 
        this.data.isLoading = true;

        // Simulate API call
        setTimeout(() => 
            this.data.items = items;
            this.data.isLoading = false;
            this.setState(this);
        , 2000);

        this.setState(this);