es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de tipo Angular NgRx en ActionReducerMap

16 Jun, 2023 Programación

Estoy programando una pequeña aplicación en Angular para aprender NgRx, pero me quedé atascado en la configuración de los reductores. Creo que el problema está relacionado con el modo estricto de Angular, pero no encontré ninguna información al respecto.

Estoy usando la siguiente configuración:

  • Angular 13
  • NgRx 13
  • Node 16

common.actions.ts

import {createAction} from '@ngrx/store';

export const isLoading = createAction('[Common] isLoading');

common.reducer.ts

import {Action, createReducer, on} from '@ngrx/store';
import * as actions from './common.actions';

export interface CommonState {
  isLoading: boolean;
}

export const commonState: CommonState = {
  isLoading: false,
};

const _commonReducer = createReducer(
  commonState,
  on(actions.isLoading, commonState => (commonState))
);

export function commonReducer(state: CommonState, action: Action) {
  return _commonReducer(state, action);
}

app.reducer.ts (este es mi archivo global)

import {commonReducer, CommonState} from "~/common/common.reducer";
import {ActionReducerMap} from "@ngrx/store";

export interface GlobalState {
  common: CommonState
}

export const appReducers: ActionReducerMap<globalstate> = {
  common: commonReducer
}

Pero el compilador está arrojando el siguiente error
log
TS2322: Type '(state: CommonState, action: Action) => CommonState' is not assignable to type 'ActionReducer<commonstate, action="">'.
Types of parameters 'state' and 'state' are incompatible.
Type 'CommonState | undefined' is not assignable to type 'CommonState'.
Type 'undefined' is not assignable to type 'CommonState'.
app.reducer.ts(5, 3): The expected type comes from property 'common' which is declared here on type 'ActionReducerMap<globalstate, action="">'.</globalstate,></commonstate,>

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El mensaje de error indica que hay un problema de compatibilidad de tipos entre commonReducer y ActionReducerMap. Específicamente, el tipo del parámetro state en commonReducer es incompatible con el tipo esperado de la propiedad common de ActionReducerMap.

    El mensaje de error sugiere que state puede ser undefined, pero common espera un objeto CommonState definido.

    Para solucionar este error, puedes modificar el código en common.reducer.ts para agregar un valor por defecto para el parámetro commonState:

    const _commonReducer = createReducer(
  commonState,
  on(actions.isLoading, state => ({ ...state }))
);

    Esto asegurará que commonState siempre esté definido cuando se llame a commonReducer.

    Alternativamente, podrías agregar un valor por defecto para la propiedad common en appReducers para manejar el caso en que state sea undefined:

    export const appReducers: ActionReducerMap<globalstate> = {
  common: commonReducer ?? commonState
}

    Con este cambio, si commonReducer devuelve undefined, se usará el valor por defecto commonState.

Comments are closed.