0

Hola tengo un inconveniente.

Estoy usando NgRx para manejar estados de mi aplicación, entonces estoy creando varios reducers que contienen los usuarios admins, las compañias que administran dichos usuarios, tipos de encuesta para esas compañías, etc.

Entonces tengo un Reducer para cada uno, intente crear varios StoreModule.forFeature pero note que tenía un error como que siempre intentaba acceder al featureKey de los "usuarios admins" así le indicara otro featureKey (por ejemplo, companiaStateFeatureKey...), estuve leyendo y por lo que entendí era por los reducers y que había que mapearlos con el ActionReducerMap, entonces lo hice, funcionó en el sentido en que guarda en el store la data pero no se como acceder a ella porque crea varias propiedades "admins" anidadas entonces si hago "admin.admins" me da un error por el modelo de datos, entonces quisiera saber si hay una forma de crear varias featureReducers o como acceder a esa data que tiene muchos anidados.

Aquí les dejo parte del código:

admin.actions.ts

import { createAction, props } from '@ngrx/store';
import { Admin } from "../../components/models";

export const GET_ADMIN = createAction('[ADMIN PAGE] Init');

export const GET_ADMINS_SUCCESS = createAction(
  '[ADMIN PAGE] Admins Exito',
  props<{ admins: Admin[] }>()
);

export const GET_ADMINS_ERROR = createAction(
  '[ADMIN PAGE] Admins Error',
  props<{ error: string }>()
);

admin.effects.ts

import { Injectable } from "@angular/core";
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { catchError, map, of, exhaustMap } from 'rxjs';
import { AdminService } from '../../services/admin.service';
import { GET_ADMIN, GET_ADMINS_ERROR, GET_ADMINS_SUCCESS } from '../actions/admin.actions';

@Injectable()
export class AdminsEffect {
  constructor(
    private actions$: Actions,
    private adminService: AdminService,
  ) {}

  loadAllAdmins$ = createEffect(() =>
    this.actions$.pipe(
      ofType(GET_ADMIN),
      exhaustMap((initAction) => {
        return this.adminService.obtenerTodosAdmins().pipe(
          map(admins => GET_ADMINS_SUCCESS({admins})),
          catchError(() => of(GET_ADMINS_ERROR({error: "Ha ocurrido un error al obtener los admins"}))),
        );
      })
    )
  )
};

admin.reducers.ts

import { Action, createReducer, on } from "@ngrx/store";
import { Admin } from "../../components/models/Admin";
import { GET_ADMINS_SUCCESS } from "../actions/admin.actions";

export interface AdminState {
  admins: Admin[];
}


const initialAdminState: AdminState = {
  admins: [],
};

export const adminReducer = createReducer(
    initialAdminState,
    on(GET_ADMINS_SUCCESS, (state, {admins}) => ({
      ...state,
      admins,
    }))
);

admin.selectors.ts

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { adminFeatureKey } from '../admin.state';
import { AdminState } from '../reducers/admin.reducers';

export const selectAdmins = createFeatureSelector<AdminState>(adminFeatureKey);

export const admins = createSelector(
  selectAdmins,
  (selectAdmins) => selectAdmins.admins
)

admin.state.ts

import { ActionReducerMap } from '@ngrx/store';
import { AdminState, adminReducer } from './reducers/admin.reducers';

export interface AdminFlowState {
  admins: AdminState;
}

export const reducers: ActionReducerMap <AdminFlowState> = {
  admins: adminReducer
}

export const adminFeatureKey = "adminState"

admin.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { CreateAdmin } from '../components/interfaces/CreateAdmin';
import { Admin } from "../components/models/Admin";
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AdminService {

  serverURL = environment.serverURL;

  constructor(private http: HttpClient) { }

  obtenerTodosAdmins(): Observable<Admin[]> {
    return this.http.get<Admin[]>(`${this.serverURL}/admins`)
  }
  ...
}

Admin.ts

export interface Admin {
  codigo: string;
  nombre: string;
  fsbs: boolean;
  createdIp: string;
  createdAt: Date;
  updatedIp: string;
  updatedAt: Date;
  logo?: Blob;
  clave?: string;
}

admin.module.ts

...
imports: [
    CommonModule,
    MaterialModule,
    NgxChartsModule,
    AdminRoutingModule,
    StoreModule.forFeature(adminFeatureKey, reducers),
    EffectsModule.forFeature([AdminsEffect]),
    ReactiveFormsModule,
    FormsModule
  ],
...

1 respuesta 1

0

ya conseguí la solución, lo conseguí en la documentación, me faltaba esto en el reductor:

...
export function reducer(state: AdminState | undefined, action: Action) {
  return adminReducer(state, action);
}
...

Luego de eso ya pude crear todos los StoreModule.forFeature() que necesitaba sin usar el ActionReducerMap y eliminando todo lo que estaba en admin.state.ts.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.