React redux 使用不同的调度更新单个属性与更新整个对象答案

【问题标题】：React redux updating single property with different dispatch vs updating whole objectReact redux 使用不同的调度更新单个属性与更新整个对象
【发布时间】：2020-10-10 08:19:12
【问题描述】：

我有一个低于 redux 的状态

state:{
  prop1:
  prop2:
  prop3:
}

每个属性值都来自 UI 上的下拉元素。

当onChange 任何这些输入时，更新状态的最佳方法是什么。当这些输入中的任何一个发生更改时更新整个对象或在 reducer 中编写单独的 case 语句以单独更新每个道具？任何想法或建议都会有所帮助。

【问题讨论】：

标签： javascript reactjs redux react-redux react-state-management

【解决方案1】：

您可以使用动作类型和有效负载作为输入字段名称和值来调度动作，然后仅更改该特定字段。然后你可以Reselect那个特定的属性，它会进一步记忆那个字段的值，因此当其他道具发生变化时不会渲染组件。

所以我的方法是。

dispatch({
  type: 'UPDATE_PROFILE_FIELD',
  payload: {
    'field_name': 'first_name',
    'value': 'John Doe',
  }
});

然后在减速器上：

switch (action.type) {
  case 'UPDATE_PROFILE_FIELD':
    const { field_name, value } = action.payload;
    // field_name can be first_name, last_name, phone_number
    const newState = Object.assign(oldState, { [field_name]: value });
    ...
    ...
    // Update new state as desired
    return newState;
}

然后使用重新选择，我们可以从特定状态中仅选择该字段。

const profileSelector = (state) => state.profile
const getFirstName = (profileSelector, profile) => profile.first_name

现在，我们可以在组件中使用getFirstName()。

另外，我建议使用不可变状态（请参阅 Immerjs），更改原始对象会导致突变问题，从而导致其他问题，例如不必要的重新渲染、未同步的反应状态等。

【讨论】：

【解决方案2】：

我个人认为

从性能上看，我觉得更新整个 Object 效率更高。根据 Bum 定律（LOL），更新整个 Object 也更好，你需要更少的代码在你的 reducer 中。

注意：除非您需要更复杂的逻辑，否则我认为可以更新整个对象。

如果您将这些 Object 键中的任何一个用作道具或在其他组件的状态逻辑中使用，您需要记住这可能会触发一些重新渲染。

【讨论】：