误解的Redux赋值和引用赋值的缺陷

在日常使用Redux的过程中，当视图发出一个动作请求并被相应的reducer处理时，有时候存储中对应的状态值已经改变，但视图中并未进入componentWillReceiveProps这个生命周期。本文主要解释下这种现象的发生到底是因为什么。

简单值（即数字、字符串、布尔值等）是作为Redux状态存储的副本传递的。这意味着对简单值的任何更改都不会反映在原始状态上。相反，对简单值的任何更改都会创建一个新的状态副本。

const state = {
  count: 0
};

const newState = {
  ...state,
  count: state.count + 1
};

console.log(state.count); // 0
console.log(newState.count); // 1

在这种情况下，newState.count的值为1，而state.count的值为0。这是因为newState是一个新的状态副本，它不引用state中的原始值。

引用类型（即对象、数组等）是通过引用传递的。这意味着对引用类型的任何更改都会反映在原始状态上。

const state = {
  user: {
    name: 'John Doe'
  }
};

const newState = {
  ...state,
  user: {
    ...state.user,
    name: 'Jane Doe'
  }
};

console.log(state.user.name); // Jane Doe
console.log(newState.user.name); // Jane Doe

在这种情况下，state.user.name和newState.user.name的值都是Jane Doe。这是因为newState.user是state.user的引用。

在Redux中使用引用类型可能会导致一些问题。例如，如果组件的状态包含引用类型的属性，那么当该组件更新时，该属性的值可能会在组件重新渲染之前更改。这可能会导致组件出现意外的行为。

为了避免这些问题，建议在Redux中使用简单值，而不是引用类型。如果确实需要在Redux中使用引用类型，那么应该注意不要在组件更新时更改这些属性的值。

• 在Redux中使用简单值，而不是引用类型。
• 如果确实需要在Redux中使用引用类型，那么应该注意不要在组件更新时更改这些属性的值。
• 如果组件的状态包含引用类型的属性，那么可以考虑使用useMemo或useCallback钩子来缓存该属性的值。
• 可以使用redux-immutable-state-invariant库来帮助您检测Redux状态中的突变。

如果您在Redux中遇到了问题，那么可能是因为您在使用引用类型。建议您尝试使用简单值，而不是引用类型。如果确实需要在Redux中使用引用类型，那么应该注意不要在组件更新时更改这些属性的值。