为什么我的redux容器会在不相关的状态发生变化时呈现?

时间:2018-01-23 22:22:24

标签: javascript reactjs typescript redux

我的redux状态如下:

{ 
  entities: {
    cars: {
      byId: {},
      isFetching: true
    },
    persons: {
      byId: {},
      isFetching: false
    }  
  }
}

我的人员容器:

class PersonPageComponent extends React.PureComponent<
  IPersonPageProps & InjectedAuthRouterProps,
  {}
> {
  render() {
    console.log('render´);
    return (<p>helllo</p>);
  }
}

const mapStateToProps = (state: RootState, ownProps: { title: string }) => ({
  list: _.values(state.entities.persons.byId), // personsSelector(state)  
});

export const PersonPage = userIsAuthenticated(
  connect<IPersonPageProps, {}, {}>(
    mapStateToProps
  )(PersonPageComponent)
);

当我在entities.cars下的redux状态发生变化时,为什么我的Person容器会重新渲染?是否应该触发渲染,因为&#39;实体&#39;改变了吗? GET_CARS操作设置entities.cars.isFetching = true。这是否会导致在PersonComponent中重新渲染?

1 个答案:

答案 0 :(得分:5)

更新state.entities.persons后,

cars可能是同一个对象,但_.values(state.entities.persons.byId)会在每次执行时生成一个新对象 - _.values不会缓存/重用其结果,即使输入保持不变。

由于提供给PureComponent的道具现在是一个不同的对象(即使内容相同),也会触发重新渲染。