Не получать обновленную стоимость из магазина

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;

ps: извинения, я только что видел код, размещенный в учебнике, на который вы ссылались, я настоятельно рекомендую вам найти другой учебник для подражания.