Question

我正在努力弄清楚为什么由redux reducer处理的商店中对象的更改不会触发我的react组件内的componentDidUpdate方法。我正在使用react开发工具，并且在状态减少后可以看到正确的存储，并且还使用redux logger并且在reducer进行更改后可以看到正确的after状态。但该组件仍然不会调用更新方法。

动作

export const GSAP_ANIMATION = 'GSAP_ANIMATION';
export const animateGsap = (key, next) => {
  return {
    type: GSAP_ANIMATION,
    payload: {
      key: key,
      next: next
    }
  }
}

减速器

case GSAP_ANIMATION:
  return Object.assign({}, state, {
    ...state,
    gsap: {
      ...state.gsap,
      [payload.key]: {
        ...state.gsap[payload.key],
        next: {
          ...payload.next
        }
      }
    }
  });

组件连接

const mapStateToProps = (state, ownProps) => {
  return {
    component: state.priorities.gsap[ownProps.id]
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    addGsap: (key) => dispatch(actions.addGsap(key))
  };
}

GsapComponent = connect(mapStateToProps, mapDispatchToProps)(GsapComponent);

在GsapComponent中我有componentDidUpdate方法，但从不调用此方法。但是，当我在chrome扩展程序中查看组件时，我可以看到this.props.component的值应该是正确的。

修改

也正在执行{ JSON.stringify(this.props.component) }正确显示更新的道具值。反应组件更新生命周期中的任何内容都不会被触发。

我也尝试过像这样的反应使用immutibility-helper

return update(state, {
    gsap: {
      [payload.key]: {
        $merge: { next: payload.next }
      }
    }
  });

但它仍然没有调用生命周期方法。

GsapComponent source code

Answer 1

检查object assign documentation。部分示例 - ＆gt;深度克隆警告。我认为你的reducer返回对象是===作为状态对象，所以反应无法检测到变化。尝试json.parse（json.stringify）变通方法或使用immutable-js。

Redux更改为嵌套对象，而不是触发组件

1 个答案: