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

Question

我有一个低于 redux 的状态

state:{
  prop1:
  prop2:
  prop3:
}

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

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

Answer 1

我个人认为，

从性能上看，我觉得更新整个Object效率更高。从流浪者法则 (LOL) 来看，更新整个 Object 也更好，你在 reducer 中需要的代码更少。

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

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

Answer 2

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

所以我的方法是。

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

然后在reducer上：

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;
}

然后使用 Reselect，我们可以 select 仅来自特定状态的字段。

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

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

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

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

React redux updating single property with different dispatch vs updating whole object

javascript

reactjs

redux

react-redux

react-state-management

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

React redux updating single property with different dispatch vs updating whole object

javascript

reactjs

redux

react-redux

react-state-management

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