Question

我正在尝试为此对象设置NGRX存储

export interface ListItem {
   id?: string;
   name: string;
}

要显示在列表组件中

<li *ngFor="let shopping of listItems | async">
          {{ shopping.name }}
        </li>

但是初始状态似乎没有出现。这是相关的动作和减速器文件

减速器

const initialState: Array<ListItem> = [
  {
    id: '1775935f-36fd-467e-a667-09f95b917f6d',
    name: 'Diet Coke',
  }
];

// tslint:disable-next-line:variable-name
const _listReducer = createReducer(initialState,
  on(add, (state, {payload}) => ({
    ...state,
    payload
  }))
)

export function listReducer(state, action) {
  return _listReducer(state, action.payload);
}

动作

export const add = createAction(
  '[List Component] Add',
  props<{payload: {item: ListItem}}>());

我的app.module中的条目

imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({
      count: counterReducer,
      list: listReducer
    }),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })
  ]

这是我尝试访问商店的地方

export class ListComponent implements OnInit {

  listItems$: Observable<Array<ListItem>>;

  constructor(private store: Store<AppState>) {
    this.listItems$ = store.pipe(select('list'));
  }

  ngOnInit() {}

}

我对NGRX领域非常陌生，所以我可能缺少一些简单的东西。

我在做什么错了？

Answer 1

我从没见过像这样从商店撤出状态：

store.pipe(select('list'))

通常看起来像这样：

this.store.select(fromFeature.getData1);

那将被定义为（在我的状态文件夹中的index.ts文件中）：

export const getData1 = createSelector(
    getFeatureState,
    state => state.feature.Data1
);

这个github项目是设置ngrx的很好参考：https://github.com/DeborahK/Angular-NgRx-GettingStarted/tree/master/APM-Demo5/src/app/products/state

设置NGRX8存储

1 个答案: