c# - ngrx store - 正确更新数组。

Question

我在我的应用程序中使用 ngrx/store，但我在保存数组时遇到了问题。我的数组在启动时设置为空:

export interface AppState{
    customObjects: Array<CustomObject>;
};

export const initialState: AppState = {
    customObjects: []
};

我正在尝试使用以下函数手动为其提供一个包含两个 CustomObjects 的数组:

loadCustomObjects() {
    let initialItems: CustomObject[] = [
        {
            directoryName: "d_name_1",
            brokenLinks: 0,
        },
        {
            directoryName: "d_name_2",
            brokenLinks: 0,
        }
    ];

    this.appStore.dispatch({ type: LOAD_CUSTOM_OBJECTS, payload: initialItems });
}

调用这个函数会调用我的 reducer 函数:

export const mainReducer: ActionReducer = (state: AppState, action: Action) => {

if (typeof state == 'undefined') {
    state = initialState;
}

switch (action.type) {
    case LOAD_CUSTOM_OBJECTS:
        return Object.assign({}, action.payload)
    default: {
        return state;
    }
}

这一切看起来都很好，但我的主要应用程序组件的数组没有获得这两个对象。如果我手动将默认状态设置为具有这两个 CustomObjects，那么它就可以工作(我不能这样做，因为我需要能够随时更新数组)。我的 HomeComponent 使用:

customObjects$ Observable<Array<CustomObject>>;

constructor(private appStore: Store<AppState>) {
            appstore.select('mainReducer')
            .subscribe((data: AppState) => {

                if (typeof data != 'undefined') {
                    this.customObjects$ = Observable.of(data.customObjects);
                }
            });
}

我分析了我的对象，我希望看到“this.customObjects$”最终成为两个 CustomObjects 的数组。相反，它是一个 ScalarOservable:

ScalarObservable {_isScalar: true, value: undefined, scheduler: null} 等等等等

注意 - 我不确定是否需要，但我已将 ChangeDetectionStrategy.onPush 包含在我的主组件的 @Component 部分中。我也确保使用

StoreModule.provideStore({ mainReducer })

在我的 app.module 类中。

有谁知道我做错了什么以及为什么“this.customObjects$”不是两个对象数组？我是 ngrx/store 的新手——我感觉我的 reducer 函数设置数组的方式有问题，但我不确定。

Answer 1

我能够让它与这段代码一起工作:

存储相关代码:

export interface CustomObject {
  directoryName: string;
  brokenLinks: number;
}

export interface AppState {
  Main: CustomObject[];
};

export function MainReducer(state: CustomObject[] = [], action: Action) {

  switch (action.type) {
    case LOAD_CUSTOM_OBJECTS:
      return Object.assign({}, action.payload);
    default: {
      return state;
    }
  }
}

const reducers = {
  Main: MainReducer
};

分发/监听存储的组件/服务

customObjects: CustomObject[];

constructor(private appStore: Store<AppState>) {
  appStore.select(store => store.Main)
    .subscribe(objs => {
      this.customObjects = objs;
      console.log(this.customObjects);
    })
}


loadCustomObjects() {
  let initialItems: CustomObject[] = [
    {
      directoryName: "d_name_1",
      brokenLinks: 0,
    },
    {
      directoryName: "d_name_2",
      brokenLinks: 0,
    }
  ];

  this.appStore.dispatch({ type: LOAD_CUSTOM_OBJECTS, payload: initialItems });
}

异步管道版本:

customObjects$: Observable<CustomObject[]>;

constructor(private appStore: Store<AppState>) {
  this.customObjects$ = appStore.select(store => store.Main);
}


loadCustomObjects() {
  let initialItems: CustomObject[] = [
    {
      directoryName: "d_name_1",
      brokenLinks: 0,
    },
    {
      directoryName: "d_name_2",
      brokenLinks: 0,
    }
  ];

  this.appStore.dispatch({ type: LOAD_CUSTOM_OBJECTS, payload: initialItems });
}

<div *ngFor="let customObj of customObjects$ | async"></div>