Hello guys I am new to angular. These days I am trying to learn state management in angular. well, I tried following some tutorials but some of their code was already depreciated so I am a bit stuck in a problem. I am unable to get the latest state value in my ts file even after subscribing to it.
//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;
//Reducer file
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;
}
}
//Effects File
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 })))
)
)
));
}
I hope someone can guide me. My angular version is 10.2.
EDITED Subscription
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);
}
)
//Selector
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
)
I got it now. I was trying to access a portion of the state which is not allowed that's why I was unable to access the state in the subscription.