javascript - NgFor 过度观察未显示 NGRX 商店中的任何商品

Question

我正在尝试学习 NGRX 商店，但在模板中显示商店中的商品时遇到了一些问题。

商店似乎按预期运作。我发现当我分派(dispatch)一个操作时它会更新，因此当我想在本例中显示待办事项列表时，我认为我在组件中做错了什么。

模板:

<div *ngFor="let todo of (todoList$ | async)">Current Count: {{ todo.task }}</div>
<div>
  <button (click)="addTodo()">Add</button>
</div>

TS:

import {Component} from '@angular/core';
import {Store} from '@ngrx/store';
import {Observable} from 'rxjs/Observable';

import * as TodoActions from './todo/store/todo.actions';
import {Todo} from './todo/todo.model';
import {State} from './todo/store/todo.reducers';

@Component({
  selector: 'todo-list',
  templateUrl: './todo-list.component.html'
})
export class TodoListComponent {
  todoList$: Observable<Todo[]>;

  constructor(private store: Store<State>) {
    this.todoList$ = store.select('todos');
  }

  addTodo() {
    this.store.dispatch(new TodoActions.AddTodo(new Todo('Finish todo-list', false)));
  }
}

我哪里做错了？

查看此 stackblitz 以获取完整的代码示例: https://stackblitz.com/edit/ngrx-test

谢谢!

Answer 1

商店在添加 Todo 方面确实发挥了应有的作用。 s，但未正确设置对商店的访问。

在您的 app.module.ts 中文件中，您的商店设置为 StoreModule.forRoot({ todoList: todoReducer }) ，这意味着您无法使用 store.select('todos'); 访问您的状态。

您可以通过将此行放入构造函数中(位于 store.select('todos'); 之前)来测试这一点。行:

store.select(state => state).subscribe( val => console.log(val));

这应该打印出类似 {todoList: {todos:[...]}} 的内容，这意味着您无法访问您的 State与 store.select('todos');选择。

需要对您的代码进行一些更改。

首先，更改您的 todoReducer功能:

export function todoReducer(todos: Todo[] = initialState, action: TodoActions.TodoActions): Todo[] {
  switch (action.type) {
    case TodoActions.ADD_TODO:
      console.log({
        todos: [...todos, action.payload]
      });
      return  [...todos, action.payload];
    default:
      return todos;
  }
}

现在，这个函数处理 Todo s，不是State .

其次，我添加了一个 const 值 tdReducer类型 ActionReducerMap<State>像这样:

export const tdReducer: ActionReducerMap<State> = {
  todos: todoReducer
}

最后，我更改了 app.module.ts 中的条目文件到此:

//rest of the imports
import * as red from './todo-list/todo/store/todo.reducers';
@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    StoreModule.forRoot(red.tdReducer)
  ],
//rest of the code

您可以在此处查看最终版本link .

我还没有使用过这个新版本的ngrx/store之前，但您可以找到解释的所有更改 here .