Question

我看不到这里发生了什么，所以我创建了一个stackblitz来简化并查看是否可以找到它。我仍在了解这家商店，并且主要关注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：抱歉，我刚刚看到您所链接的教程上发布的代码，我强烈建议您找到另一个要遵循的教程。

无法从商店获取更新价值

1 个答案: