NGXS

Question

我正在尝试将我的站点配置作为一个对象放入 NGXS 中。与其创建一个操作来为对象的每个属性设置值，我希望允许单个操作包含属性名称和新值。然后我会更新属性。我尝试了几种方法，但 none 似乎有效....

import { State, Action, Selector, StateContext } from '@ngxs/store';
import { SetLayout, SetTheme, SetLayoutConfigurationProperty } from './layout.actions';
import { Injectable } from '@angular/core';
import { LayoutConfiguration } from './layout.types';

export interface LayoutStateModel {
  currentTheme: string;
  configuration: LayoutConfiguration;
}

@State<LayoutStateModel>({
  name: 'layout',
  defaults: {
    currentTheme: 'light',
    configuration: {
      ShowAvatar: true,
      ShowMessages: true,
      ShowSearch: true,
      ShowShortcuts: true,
      ShowSidebarAlerts: true,
      ShowSidebarUserMenu: true,
    },
  },
})
@Injectable()
export class LayoutStateModule {
  @Selector()
  public static getCurrentTheme(state: LayoutStateModel): string {
    return state.currentTheme;
  }
  @Selector()
  public static GetConfiguration(state: LayoutStateModel): LayoutConfiguration {
    return state.configuration;
  }

  @Action(SetTheme)
  public SetTheme({ patchState }: StateContext<LayoutStateModel>, { payload }: SetTheme): void {
    patchState({ currentTheme: payload });
  }
  @Action(SetLayoutConfigurationProperty)
  public SetLayoutConfigurationProperty(
    { getState, patchState }: StateContext<LayoutStateModel>,
    { payload }: SetLayoutConfigurationProperty
  ): void {
    patchState({ configuration: { ...getState().configuration, [payload.property]: payload.value } });
  }
}

正在执行操作（我确定您不需要此代码）

export class SetLayoutConfigurationProperty {
  public static readonly type = '[Layout] Set confiuration property change';
  constructor(public payload: { property: string; value: boolean }) {}
}

但是触发操作 SetLayoutConfigurationProperty 似乎会导致无限循环。任何帮助将不胜感激

Answer 1

这对我来说很好，它是正在调度的 SetLayoutConfigurationProperty 个动作的无限循环吗？

你有没有订阅状态的这一部分并在它改变时调度一个动作的东西？

这似乎很可能会导致此类问题。为了调试，我会在动作构造函数中设置一个断点，以查看它被分派到哪里以及为什么

NGXS - 在对象内设置 属性

NGXS - set property within object

angular

NGXS - 在对象内设置属性