I encountered an issue with my login/logout state management setup. The error message I received is as follows:
When trying to assign '(state: State | undefined, action: authActions) => State' to type 'ActionReducer
Below are the contents of my files.
auth.actions.ts
import { Action } from '@ngrx/store';
import { User } from '../user/user.model';
export enum types {
LOGIN = '[AUTH] LOGIN',
LOGOUT = '[AUTH] LOGOUT',
}
export class Login implements Action {
readonly type = types.LOGIN;
constructor(public payload: User) {}
}
export class Logout implements Action {
readonly type = types.LOGOUT;
}
export type authActions = Login | Logout;
auth.reducer.ts
import { User } from '../user/user.model';
import * as authActions from './auth.actions';
export interface State {
isLoggedIn: boolean;
user: User | null;
}
const initialState: State = {
isLoggedIn: false,
user: null,
};
export function authReducer(
state: State = initialState,
action: authActions.authActions
): State {
switch (action.type) {
case authActions.types.LOGIN:
return { ...state, isLoggedIn: true, user: action.payload };
case authActions.types.LOGOUT:
return { ...state, isLoggedIn: false, user: null };
default:
return state;
}
}
app.reducer.ts
import { ActionReducerMap } from '@ngrx/store';
import * as fromAuthReducer from '../auth/store/auth.reducer';
export interface AppState {
auth: fromAuthReducer.State;
}
export const appReducer: ActionReducerMap<AppState> = {
auth: fromAuthReducer.authReducer,
};