组件不会在状态更改时重新呈现-Redux

Question

我无法在状态更改时重新渲染组件。 我相当有信心我不会改变国家。

组件（域）

...
<Add
   onClick={() => {
   domain.routes.push({
     from: 'foo',
     to: 'bar'
   });
   this.props.setDomain(this.props.domainIndex, domain);
}} />
...

减速器

case 'SET_DOMAIN':
  let tmpState = {...state}
  tmpState.domains[action.index] = action.value;
  return {...tmpState}

行动

export const setDomain = (index, domain) => ({
  type: 'SET_DOMAIN',
  value: domain,
  index: index
});

容器

import { connect } from 'react-redux';
import { setDomain, setRoute } from '../actions';
import Domain from '../components/pages/domain';

const mapStateToProps = state => ({
  domains: state.domains
});

const mapDispatchToProps = dispatch => ({
  setDomain: (index, domain) => dispatch(setDomain(index, domain)),
  setRoute: (domainIndex, routeIndex, route) =>
    dispatch(setRoute(domainIndex, routeIndex, route))
});

export default connect(mapStateToProps, mapDispatchToProps)(Domain);

从redux chrome扩展名，我可以看到setDomain被调用并且状态被正确返回：

Answer 1

React Redux尝试通过对shouldComponentUpdate中传入的道具进行浅层相等性引用检查来提高性能，如果所有引用都相同，则shouldComponentUpdate返回false将跳过实际更新原始组件的过程。

重要的是要记住，每当更新嵌套值时，还必须在状态树中返回其上的任何内容的新副本。 如果您具有state.abcd，并且要对d进行更新，则还需要返回c，b，a和state的新副本。

来自https://redux.js.org/faq/react-redux#react-not-rerendering

{...object}只是一个浅表克隆。 该对象的子对象仍将具有相同的引用。 因此，对于Redux，子对象不会更新。

我认为解决此问题的最快方法是使用Lodash cloneDeep 。

let tmpState = _.cloneDeep(state);

要么

tmpState.domains = _.cloneDeep(tmpState.domains);

但这确实会带来性能成本。

或者，您可以按1的方式浅克隆受影响的孩子。