无法在 Angular 中使用 ngrx 获取最新状态值

问题描述

大家好，我是 angular 的新手。这些天我正在尝试学习 angular 的状态管理。好吧，我尝试遵循一些教程，但他们的一些代码已经贬值，所以我有点陷入问题。即使订阅了它，我也无法在我的 ts 文件中获取最新的状态值。

//Action File
import { Action } from '@ngrx/store';

export enum CategoriesActionTypes {
  LoadCategoriess = '[Categories] Load Categoriess',LoadCategoriessSuccess = '[Categories] Load Categoriess Success',LoadCategoriessFailure = '[Categories] Load Categoriess Failure',}

export class LoadCategoriess implements Action {
  readonly type = CategoriesActionTypes.LoadCategoriess;
}

export class LoadCategoriessSuccess implements Action {
  readonly type = CategoriesActionTypes.LoadCategoriessSuccess;
  constructor(public payload: { data: any }) { }
}

export class LoadCategoriessFailure implements Action {
  readonly type = CategoriesActionTypes.LoadCategoriessFailure;
  constructor(public payload: { error: any }) { }
}

export type CategoriesActions = LoadCategoriess | LoadCategoriessSuccess | LoadCategoriessFailure;

//减速器文件

import { CategoriesActions,CategoriesActionTypes } from '../Actions/categories.actions';
import { Action } from '@ngrx/store';


export const categoriesFeatureKey = 'categoriesstate';

export interface State {
categories :any,error: any
}

export const initialState: State = {
  categories:[{name:'name'}],error :null,};

export function reducer(state = initialState,action: CategoriesActions): State {
  
  switch (action.type) {
    case CategoriesActionTypes.LoadCategoriess:
    return{
      ...state
    }
    case CategoriesActionTypes.LoadCategoriessSuccess:
      // debugger
      console.log(action.payload.data);
      
      return {
        ...state,categories: action.payload.data,error: ''
      }

    case CategoriesActionTypes.LoadCategoriessFailure:
      return {
        ...state,categories: [],error: action.payload.error
      }
    default:
      return state;
  }
}

//效果文件

import { FrontserveiceService } from './../front/frontserveice.service';
import { Injectable } from '@angular/core';
import { Actions,Effect,createEffect,ofType } from '@ngrx/effects';

import { Observable,of } from 'rxjs';
import { Action } from '@ngrx/store';
import * as CategoriesActions from './../Actions/categories.actions';
import { mergeMap,map,catchError } from 'rxjs/operators';

@Injectable()
export class CategoriesEffects {



  constructor(private actions$: Actions,private service:FrontserveiceService) {}


  // @Effect()
  loadCategories$: Observable<any> = createEffect(() =>
  this.actions$.pipe(
    ofType(CategoriesActions.CategoriesActionTypes.LoadCategoriess),mergeMap(
      action => this.service.CategoryList({ image: true }).pipe(
        map(users => {
          return (new CategoriesActions.LoadCategoriessSuccess({ data: users }));
        }),catchError(err => of(new CategoriesActions.LoadCategoriessFailure({ error: err })))
      )
    )
  ));
  
}

希望有人能指导我。我的 angular 版本是 10.2。

已编辑 订阅

this.store.dispatch(new CategoriesActions.LoadCategoriess());
    // console.log(select(fromcategory.getUsers));
    
    this.store.pipe(select(fromcategory.getUsers)).subscribe(
      users => {
        console.log(users);
        this.categories = users.categories;
        this.service.CategoryData = users.categories != undefined ? users.categories : [];
        this.Scategory = this.StoreSelect(this.categories);

      }
    )
    this.store.pipe(select(fromcategory.getError)).subscribe(
      err => {
        console.log(err);
      }
    )

Redux Devtools

//选择器

import { State } from './../ReduceRSS/categories.reducer';
import { createFeatureSelector,createSelector } from '@ngrx/store';

const getCategoryFeatureState = createFeatureSelector<State>('categoriesstate');

export const getUsers = createSelector(
    getCategoryFeatureState,state => state.categories
)

export const getError = createSelector(
    getCategoryFeatureState,state => state.error
)

解决方法

我现在明白了。我试图访问不允许的状态的一部分，这就是为什么我无法访问订阅中的状态。