Проблема слияния объекта с состоянием в угловом NgRx

Question

Я прочитал этот урок о создании хранилища NgRx , поэтому я создал простое хранилище со следующей формой.

export const initialState: IState = {
  app: initialAppState
};

export function getInitialState(): IState {
  return initialState;
}

export interface IApp {
  id?: string;
  testMode?: boolean;
  authenticated?: boolean;
  user?: User;
  role?: string;
}

export interface IAppState {
  app: IApp;
}

export const initialAppState: IAppState = {
  app: {
    id: null,
    testMode: false,
    authenticated: false,
    user: null,
    role: 'END_USER'
  }
};

Он имеет одно действие PatchApp с редуктором, который выглядит следующим образом

export const appReducers = (state = initialAppState, action: AppActions): IAppState => {
  switch (action.type) {
    case AppActionTypes.PatchApp: {
      return { ...state, app: action.payload };
    }

    default:
      return state;
  }
};

Теперь мне это кажется очень простым. У нас есть начальное состояние, которое хранится в свойстве app. Если мы получим полезную нагрузку для обновления свойства authenticated в существующем состоянии, я ожидаю, что редуктор перезапишет только это свойство вместо всего состояния.

Но когда я перехожу к отладчику, я вижу, что состояние get обновляется только с помощью переданного свойства.

Итак, если у меня есть начальное состояние, подобное этому:

export const initialAppState: IAppState = {
  app: {
    id: null,
    testMode: false,
    authenticated: false,
    user: null,
    role: 'END_USER'
  }
};

затем я делаю PatchApp с {authenticated: true, id: 'someid'}, я ожидаю, что action.payload перезапишет / объединит / исправит существующий объект.

Вместо этого происходит перезапись всего хранилища с помощью ПРОСТОГО свойства. Так что после выполнения указанного патча у нас будет только набор реквизитов authenticated и id.

Есть идеи, почему мой редуктор работает не так, как ожидалось? Я прочитал статью от Флавио Копеса и не вижу ничего, где я ошибаюсь.

Я также пытался использовать Object.assign() для объединения объектов.

return Object.assign({}, state, { app: action.payload });

У меня есть CodeSandbox, который иллюстрирует проблему, которую я пытаюсь решить.

https://codesandbox.io/s/oxj7xx5n35?fontsize=14

Answer 1

Не уверен, правильно ли я понял, что вы пытаетесь сделать, но кажется, что вы хотите исправить только часть состояния app. Если это так, вы должны сделать это так:

export const appReducers = (state = initialAppState, action: AppActions): IAppState => {
  switch (action.type) {
    case AppActionTypes.PatchApp: {
      return { 
        ...state, 
        app: {...state.app, ...action.payload} 
      };
    }

    default:
      return state;
  }
};