如何限制react-redux连接更新重新渲染到特定状态分支？

Question

我有一个动作和减速器，可以更新全局计数器。快速执行此操作。减速器为每个操作返回状态的新副本。减速器看起来像：

import { handleActions } from 'redux-actions';
import { sceneTick } from './actions';

export default (state, action) => handleActions({
  [sceneTick]: (state, action) => {
    return {
      ...state,
      loop: action.payload,
    }
  },

我在各种React组件上使用react- redux的connect方法。并非所有组件都关心此循环计数器。因为我在每个刻度上都在化简器中返回新状态，所以所有订阅的组件connect都将mapDispatchToProps执行，这会导致不必要的React渲染调用。

这些组件之一如下所示：

const mapStateToProps = (state, props) => {
  return {
    viewport: state.viewport,
    assets: state.assets,
  };
};


export default connect(mapStateToProps, {})(Component)

即使此组件不依赖state.loop它，也会触发重新渲染。这会导致重新渲染，过度渲染，多次渲染，不必要的渲染，性能问题以及不需要重新渲染的组件中的意外行为。

更新 我还应该补充一点，我 没有combineReducers在这里使用，并且所有的reducer都被应用到了全状态。不确定是否相关。

Answer 1

Redux connect接受一个areStatesEqual功能选项，可用于将相等性检查范围缩小到特定的状态分支。

export default connect(
  {},
  {},
  null,
  {
    areStatesEqual: (next, prev) => {
      return (
        prev.branch === next.branch
      );
    }
  }
)(Component);