React redux обновляет одно свойство с другой отправкой и обновляет весь объект

Question

• 1000 любого из этих входов. Обновить весь объект при изменении любого из этих входов или написать отдельный оператор case в reducer, чтобы обновить каждую опору индивидуально? Любые мысли или предложения будут полезны.

Answer 1

Вы можете отправить действие с типом действия и полезной нагрузкой в ​​качестве имени и значения поля ввода, а затем изменить только это конкретное поле. И затем вы можете повторно выбрать только это конкретное свойство, которое будет дополнительно запоминать значение для этого поля, таким образом, не будет рендеринга компонента при изменении других свойств.

Так что мой подход будет таким.

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

Затем, используя Reselect, мы можем выбрать только это поле из определенного состояния.

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

Теперь мы можем использовать getFirstName() в наших компонентах.

Кроме того, я повторно рекомендую использовать неизменяемое состояние (см. Immer js), изменение исходного объекта приведет к проблемам с мутацией, которые могут привести к другим проблемам, таким как ненужная повторная установка. рендеринг, несинхронизированные состояния реакции и т.д. c.

Answer 2

По моему мнению,

С точки зрения производительности, я думаю, что более эффективно обновлять весь объект. Из закона бездельника (LOL) также лучше обновить весь объект, вам нужно меньше кода в вашем редукторе.

Примечание: Если вам не нужны более сложные logi c, Я думаю, это нормально, обновить весь объект.

Если вы используете какой-либо из этих ключей объекта в качестве опоры или в логике состояния c в других компонентах, вы должны иметь в виду, что это может вызвать некоторые повторные рендеры.