4

我在我的应用程序中使用 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 函数设置数组的方式存在问题，但我不确定。

4

1 回答 1

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>
于 2017-07-14T04:19:07.463 回答