未从商店获取更新值

Question

我看不到这里发生了什么，所以我创建了一个 stackblitz to simplify and see if I could find it. I'm still learning about the store and am mostly following https://www.heavyweightsoftware.com/loading-app-wide-values-into-the-angular-store/ 这是我一直在使用的教程。显然我缺少一些东西。

这是我的简单客户对象：

export const CUSTOMER_1: Customer = {
  customerId: 1,
  name: 'James Bond'
}

export const CUSTOMER_2: Customer = {
  customerId: 2,
  name: 'Dirk Pitt'
}

export const CUSTOMER_LIST: Customer[] = [
  CUSTOMER_1, CUSTOMER_2
]

export class Customer{
  customerId: number;
  name: string;
}

这是我商店的部分：

app-customer.state.ts:

import { Customer } from '../customer'

export const STORE_CUSTOMER = 'customer';

export interface AppCustomerState {
  readonly customer: Customer;
}

customer.actions.ts

import { Action } from '@ngrx/store';
import { Customer } from '../customer'

export const LOAD_CUSTOMER         = '[customer] Load Customer';

export class LoadCustomer implements Action {
  readonly type = LOAD_CUSTOMER;

  constructor(public payload: Customer) {}
}

export type Actions = LoadCustomer;

customer.reducers.ts

import * as CustomerActions from './customer.actions';
import { Customer } from '../customer'

const initialCustomer: Customer = {
  customerId: 0,
  name: ''
};

export function customerReducer(state: Customer = initialCustomer, action: CustomerActions.Actions): Customer {
  switch (action.type) {
    case CustomerActions.LOAD_CUSTOMER:
      console.log('Storing customer', action.payload);
      state = action.payload;
      return state;

    default:
      return state;
  }
}

这是我的 app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavComponent } from './components/nav.component';
import { SearchComponent } from './components/search.component';
import { ViewComponent } from './components/view.component';

import { AppRoutingModule } from './app-routing.module';
import {StoreModule} from '@ngrx/store';
import {customerReducer} from './store/customer.reducers';

@NgModule({
  imports:      [ BrowserModule,
                  FormsModule,
                  AppRoutingModule,
                  StoreModule.forRoot({
                    name: customerReducer
                  }) ],
  declarations: [ AppComponent,
                  NavComponent,
                  SearchComponent,
                  ViewComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

然后我有一个在商店中存储值的搜索屏幕：

  this.store.dispatch(new CustomerActions.LoadCustomer(customer));

存储后，我收到一条控制台消息：

Storing customer {customerId: 1, name: "James Bond"}

我使用了上述教程并将其用作模板。我不明白我错过了什么。以及在 ngOnInit()

上读取该值的查看器

  ngOnInit(): void {
        this.store.select(STORE_CUSTOMER).subscribe(customer =>
            this.updateCustomer(customer));
  }

  updateCustomer(cust: Customer): void {
    this.customer = cust;
  }

但这显示为未定义。

Answer 1

问题在这里：

export const STORE_CUSTOMER = 'customer';

什么时候应该

export const STORE_CUSTOMER = 'name';

适合您的 app.module 导入：

StoreModule.forRoot({
    name: customerReducer
}),

更重要的问题是你的减速器，你正在改变状态。状态是不可变的，不应更改。

所以

export function customerReducer(state: Customer = initialCustomer, action: CustomerActions.Actions): Customer {
  switch (action.type) {
    case CustomerActions.LOAD_CUSTOMER:
      console.log('Storing customer', action.payload);
      state = action.payload;
      return state;
     // ...
  }
}

实际上应该是这样的：

export function customerReducer(state: Customer = initialCustomer, action: CustomerActions.Actions): Customer {
  switch (action.type) {
    case CustomerActions.LOAD_CUSTOMER:
      console.log('Storing customer', action.payload);
      return { ...state, ...action.payload };
     // ...
  }
}

或者在你的情况下，只需 return action.payload;

p.s: 抱歉，我刚刚看到您链接到的教程上发布的代码，我强烈建议您找到另一个教程。

未从商店获取更新值

Not getting updated value from store

store

angular