【NGXS】ネストした状態の部分更新を簡潔に書く（patch state operator）

下記のような型の状態を管理するNGXSのStateを考える。

export interface PersonStateModel {
  name: {
    firstName: string;
    lastName: string;
  };
  age: number;
}

firstNameだけ更新するコードを書こうとすると、ネストが2階層なのでctx.patchStateでは意外とシュッと書けない

export class UpdatePersonFirstName {
  static readonly type = 'Update person';
  constructor(public payload: string) {}
}

@State<PersonStateModel>({
  name: 'person',
  defaults: {
    name: {
      firstName: 'Taro',
      lastName: 'Yamada',
    },
    age: 20;
  }
})
@Injectable()
export class PersonState {
  @Action(UpdatePersonFirstName)
  updatePersonFirstName(ctx: StateContext<PersonStateModel>, { payload }: UpdatePersonFirstName) {
    ctx.patchState({
      name: {
        ...ctx.getState().name,   // ここがなんとかできないか？
        firstName: payload
      }
    });
  }

State Operatorの「patch」を使うと…

@Injectable()
export class PersonState {
  @Action(UpdatePersonFirstName)
  updatePersonFirstName(ctx: StateContext<PersonStateModel>, { payload }: UpdatePersonFirstName) {
    ctx.setState(
      patch({
        name: patch({
          firstName: payload
        })
      })
    });
  }

ネストさせられるので、name.firstNameだけ更新されるという意図が明確になって良いのではないかと思います。

参考

• State Operators - NGXS
• patchState vs. patch state operator : NGXS