如何正确返回ActionSreducermap

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：类型'{GlobalState：actionReDucer＆lt; AppState，Action＆gt;; }'不能分配给'ActionReducermap＆lt; AppState，Action＆gt;'。

我在做什么错？请帮助

Answer 1

尝试添加Reducer Case Case

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的响应类型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),
  ...
]