Angular NgRx 类型检查 app.reducer.ts 错误

Question

我有一个简单的登录/注销状态管理。 我收到此错误：

类型 '(state: State | undefined, action: authActions) => State' 不可分配给类型 'ActionReducer'。 参数“action”和“action”的类型不兼容。 类型“Action”不可分配给类型“authActions”。 类型“操作”不可分配给类型“注销”。 属性“类型”的类型不兼容。 类型 'string' 不能分配给类型 'types.LOGOUT'。

这是我的文件。

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,
};

Answer 1

这是使用ngrx 的旧语法的问题。您应该使用更好地支持 typescript 的 creator 语法。

您的代码的解决方案是使用 any 类型的 ActionReducerMap：

export const appReducer: ActionReducerMap<AppState, any> = {
  auth: fromAuthReducer.authReducer,
};