angular - 为什么我收到商店对象而不是我自己的对象(PizzaState)？

Question

我尝试创建 Observable<PizzaState> 类型的 Pizzas$ 对象但我遇到一个问题

我收到一个 store 对象而不是 PizzaState 对象，但我不明白为什么以及如何修复它

这是我得到的对象

Store {_isScalar: false, actionsObserver: ActionsSubject, reducerManager: ReducerManager, source: Store, operator: DistinctUntilChangedOperator}

我只尝试阅读我的 initialState来 self 的商店

我的读取组件

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { ProductesState } from '../shared/models/productesState.model';
import { Observable } from 'rxjs';
import { PizzaState } from '../shared/models/pizzaState.model';
import * as fromPizzas from '../store/actions/pizzas.action'

@Component({
  selector: 'app-read',
  templateUrl: './read.component.html',
  styleUrls: ['./read.component.css']
})
export class ReadComponent implements OnInit {

  public pizzas$: Observable<PizzaState> = this.store.pipe(select('pizzas'));

  constructor(private store: Store<ProductesState>) { }

  ngOnInit() {
    console.log(this.pizzas$);
  }

我的行动

import { Action, createAction, props } from '@ngrx/store';
import { Pizza } from 'src/app/shared/models/Pizza.model';


export const LoadPizzas = createAction('[Products] Load Pizzas')
export const LoadPizzasFail = createAction('[Products] Load Pizzas Fail', props<{ payload: Pizza[] }>())
export const LoadPizzasSuccess = createAction('[Products] Load Pizzas Success', props<{ payload: Pizza[] }>())

我的 reducer

import { PizzaState } from 'src/app/shared/models/pizzaState.model';
import * as fromPizzas from '../actions/pizzas.action'
import { createReducer, on } from '@ngrx/store';

export const initialState: PizzaState = {
    data: [],
    loaded: false,
    loading: false
}

export const reducer = createReducer<PizzaState>(
    initialState, on(
        fromPizzas.LoadPizzas, state => {
            return {
                ...state,
                loading: true
            }
        }
    ), on(
        fromPizzas.LoadPizzasSuccess, state => {
            return {
                ...state,
                loaded: true,
                loading: false
            }
        }
    ), on(
        fromPizzas.LoadPizzasFail, state => {
            return {
                ...state,
                loaded: false,
                loading: false
            }
        }
    )

)

reducer 索引

import { reducer } from './pizzas.reducer';
import { ActionReducerMap } from '@ngrx/store';
import { ProductesState } from 'src/app/shared/models/productesState.model';

export const reducers: ActionReducerMap<ProductesState> = {
    pizzas: reducer
}

我的模块

import { reducers } from './store/reducers/index';

    StoreModule.forRoot({
      pizzas: reducers.pizzas
    })

我的模型

import { PizzaState } from './pizzaState.model';

export interface ProductesState {
    pizzas: PizzaState;
}

----------

import { Pizza } from './Pizza.model';

export interface PizzaState {
    data: Pizza[],
    loaded: boolean,
    loading: boolean
}

----------

export interface Pizza {
    id: number,
    name: string
}

如果需要更多文件，我很乐意添加， 感谢您的帮助。

Answer 1

这是因为您正在记录您的 Observable，而不是订阅它。 NGRX 使用一个名为 Store 的扩展 Observable，因此您所看到的绝对正确。

@Component({
  selector: 'app-read',
  templateUrl: './read.component.html',
  styleUrls: ['./read.component.css']
})
export class ReadComponent implements OnInit {

  public pizzas$: Observable<PizzaState> = this.store.pipe(select('pizzas'));

  constructor(private store: Store<ProductesState>) { }

  ngOnInit() {
    console.log(this.pizzas$);   // This logs your Observable, which holds your store value over time

    this.pizzas$.subscribe(currentPizzas => {
       // This function is called everytime your state changes + initial state
       console.log(currentPizzas); // This logs your current pizza state
    });
  }
}

既然您指的是this video我会一遍又一遍地解释其中的区别。在视频中，他正在创建一个包含 cars 的流。在一个名为 cars$ 的 Observable 中。然后，他仅在模板内使用该 Observable 来通过使用 async 显示一些数据。像这样的管道<car-table [cars]="cars$ | async"> 。这个async Pipe 会为您处理订阅和取消订阅。