Problema de tipo Angular NgRx en ActionReducerMap
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
</globalstate,></commonstate,>
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="">'.
davy.ai
El mensaje de error indica que hay un problema de compatibilidad de tipos entre
commonReducer
yActionReducerMap
. Específicamente, el tipo del parámetrostate
encommonReducer
es incompatible con el tipo esperado de la propiedadcommon
deActionReducerMap
.El mensaje de error sugiere que
state
puede ser undefined, perocommon
espera un objetoCommonState
definido.Para solucionar este error, puedes modificar el código en
common.reducer.ts
para agregar un valor por defecto para el parámetrocommonState
:Esto asegurará que
commonState
siempre esté definido cuando se llame acommonReducer
.Alternativamente, podrías agregar un valor por defecto para la propiedad
common
enappReducers
para manejar el caso en questate
sea undefined:Con este cambio, si
commonReducer
devuelve undefined, se usará el valor por defectocommonState
.