为什么Ngrx忽略我的初始Store值，无法展示待办初始状态列表

问题出在根Store注册逻辑、状态选择器逻辑不匹配两个核心点，对应修改方式如下： #

1. 修正App模块的Store注册代码 #

StoreModule.forRoot要求传入键值对格式的reducer映射对象，不能直接传入单个reducer函数，需要指定你的todo状态挂载到根状态的哪个节点下：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';

import { AppComponent } from './app.component';
import { todoReducer } from './todo.reducer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    // 改动：传入reducer映射对象，指定todo状态节点对应的reducer
    StoreModule.forRoot({ todo: todoReducer })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修正App组件的状态选择逻辑 #

根状态现在包含了todo节点，需要调整Store泛型和select选择器的取值路径：

import { Component } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { ToDoItem, TodoList } from './models';
import { AddItemClass } from './todo.actions';
import { ToDoState } from './todo.reducer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todoList: Observable<ToDoItem[]> ;

  // 改动：Store泛型匹配根状态结构
  constructor(private store :Store<{todo: ToDoState}>) 
  {
    // 改动：先选中todo状态节点，再提取内部的items数组
    this.todoList = this.store.pipe(select(state => state.todo.items)) ;
  }
}

可选校验项 #

检查models.ts中ToDoItem的定义，确保属性名和模板中引用的一致：

export class ToDoItem {
  // 确保构造函数参数和模板中用到的taskVal、completed命名完全匹配
  constructor(public taskVal: string, public completed: boolean) {}
}

修改完成后初始的todo item就可以正常渲染了。

内容的提问来源于stack exchange，提问作者mLar