如何正确 return ActionReducerMap

Question

我已经这样定义了我的减速器

    import { Action, ActionReducerMap, createAction, createReducer, on } from '@ngrx/store'
import AppUser from 'src/app/shared/models/app-user';
import { AuthActions } from '../auth.action.types';


export interface AppState {
  loggedInUser: AppUser
}

export const initialGlobalState: AppState = {
  loggedInUser: undefined,
};

export const authReducer = createReducer(
  initialGlobalState,

  on(AuthActions.loginSuccess, (state, action) => {
    return {
    // ...state,
      loggedInUser: action.loggedInUser,
    };
  }),

  on(AuthActions.logout, (state, action) => {
    return {
  //   ...state,
      loggedInUser: undefined,
    };
  }),
);

export const reducers: ActionReducerMap<AppState> = {
  globalState: authReducer,
};

并且这个减速器像这样连接到 app.module.ts。

    StoreModule.forRoot(reducers),
StoreDevtoolsModule.instrument({
  maxAge: 25, // Retains last 25 states
  logOnly: environment.production, // Restrict extension to log-only mode
}),
EffectsModule.forRoot([AuthEffects])

但我收到编译错误

TS2322: Type '{ globalState: ActionReducer<AppState, Action>; }' is not assignable to type 'ActionReducerMap<AppState, Action>'.

我做错了什么？请帮忙

Answer 1

尝试为 reducer 案例添加响应类型

export const authReducer = createReducer(
  initialGlobalState,

  on(AuthActions.loginSuccess, (state, action): AppState => {
    return {
    // ...state,
      loggedInUser: action.loggedInUser,
    };
  }),

  on(AuthActions.logout, (state, action): AppState => {
    return {
  //   ...state,
      loggedInUser: undefined,
    };
  }),
);

UPD@2

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

export interface State {
  model: State | null;
}

const initialState: State = {
  model: null,
};

const authReducer = createReducer(
  initialState,

  on(fromAuth.Load, (state) => ({ ...state, model: null }))
);

function reducer(state: State | undefined, action: Action): State {
  return authReducer(state, action);
}

export const reducers: ActionReducerMap<{ globalAuth: State }> = {
  globalAuth: reducer,
};

Answer 2

我认为您需要在设置 global 属性的地方创建另一个界面，您可以为此创建另一个文件

index.ts

import * as fromAuth from './reducers/auth.reducer';

export interface State {
 global: fromAuth.AppState,
 // you can add more states here that will be need it for root,
 // for example:
 // preferences: fromPreferences.State
}

export const reducers: ActionReducerMap<State> = {
 global: fromAuth.authReducer
 // preferences: fromPreferences.reducer
}

app.module.ts

import { reducers } from './store/auth/index';
...
...
imports: [
  StoreModule.forRoot(reducers),
  ...
]

如何正确 return ActionReducerMap

how to return ActionReducerMap properly

ngrx

angular