Question

我是ReDux的新手，并且正在开发一个包含多个Reducer的项目。

在subscribe中调用/引用的函数中，只要存储中的任何数据发生更改，就会调用它。例如，我有一个待办事项列表和一个存储动画信息的对象，基本上是一个属性列表。如果我更新要执行的项目，我不想重新渲染动画对象。如果我更新动画属性，我不想重新渲染待办事项列表。

如何判断哪个数据对象已被更改？

这是我订阅ReDux中数据更改的代码：

$(function() {

    var $todoPane = $('#todopane');
    var $animFormPane = $('#animation_form');

    //  Render objects onload.
//  renderTodos($todoPane, APP.store.getState().todos.allTodos);
//  renderAniPropForm($animFormPane, APP.store.getState().animation);

    APP.store.subscribe(function() {
        //  Did some part of the ui change? (sliders that alter the height or width of panes on the page)

        //  Did todos change?
        renderTodos($todoPane, APP.store.getState().todos.allTodos);
        //  Did animation values change?
        renderAniPropForm($animFormPane, APP.store.getState().animation);
        //  Did an object change?

        //  Did an action change?

    });
});

我把什么评论放在// @的评论中？价值变化？

Answer 1

用于检测React和Redux应用程序中的更改的标准方法是严格的相等检查。如果两个变量不是===相等，则假定它们是不同的。这需要您update your data immutably。

所以，作为一个简单的例子：

let lastTodosState, lastAnimationState;

APP.store.subscribe(function() {
    //  Did some part of the ui change? (sliders that alter the height or width of panes on the page)

    const newState = store.getState();

    if(newState.todos.allTodos !== lastTodosState.allTodos) {
        renderTodos($todoPane, newState.todos.allTodos);
    }

    if(newState.animation !== lastAnimationState) {
        renderAniPropForm($animFormPane, newState.animation);
    }

    lastTodosState = newState.todos;
    lastAnimationState = newState.animation;

    //  Did an object change?
    //  Did an action change?
});

如果您正在为您的UI图层使用React，React-Redux connect函数会自动生成为您执行此操作的组件。

Answer 2

Redux减少操作中的

将更新可用的唯一状态树，这将迫使<Provider>下的所有组件的整个渲染进入重新选择https://github.com/reactjs/reselect。通过提示记忆选择器，您可以记住属性并防止组件重新渲染，只要选择器的监视状态不会改变

如何判断部分数据是否发生变化？

2 个答案: