我已經像這樣定義了我的減速器
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,
};
并且這個 reducer 像這樣連接到 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<AppState, Action>; }' 不可分配給型別 'ActionReducerMap<AppState, Action>'。
我究竟做錯了什么 ？好心的幫助
uj5u.com熱心網友回復：
嘗試為 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,
};
}),
);
更新@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,
};
uj5u.com熱心網友回復：
我相信您需要創建另一個設定global屬性的界面，您可以為此創建另一個檔案
索引.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),
...
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/462667.html
上一篇：如何在有角度的按鈕中設定條件？