Одно только назначение объекта не вызывает изменения состояния в React

Question

Я хотел бы знать в мире React / Redux, в чем разница между этим

let newState = Object.assign({}, state);
newState[action.componentDescriptor.name][action.id].Value = action.value;
return newState;

и этим

    return Object.assign({}, state, {
        [action.componentDescriptor.name]: objectAssign({}, state[action.componentDescriptor.name], {
            [action.id]: objectAssign({}, state[action.componentDescriptor.name][action.id], {
                Value: action.value
            })
        })
    });

Кажется, что первый не запускает рендеринг (кажется, не признается как изменение состояния).Но последний признается как изменение состояния и запускает рендеринг.Оба возвращают новые объекты (состояние)?

Answer 1

В первом случае вы используете Object.assign один раз, и это создает только поверхностную копию.Это означает, что ваш объект копируется только для одного уровня, и все вложенные свойства указывают на одни и те же ссылки.Таким образом, когда вы изменяете его напрямую, Redux не может понять разницу.

В последующем (я полагаю, вы все делаете правильно) вы изменяете свое состояние, не изменяя первоначальное и должным образом.Вы создаете копии своих вложенных свойств с Object.assign.Это то, что имеет значение.

Для более чистой версии вы можете использовать синтаксис распространения .

return {
  ...state,
  [action.componentDescriptor.name]: {
    ...state[action.componentDescriptor.name],
    [action.id]: {
      ...state[action.componentDescriptor.name][action.id],
      Value: action.value,
    }
  }
}

Или вы можете нормализовать ваше состояние чтобы избежать множества вложенных мутаций.