javascript - ngrx 8 影响其他类型的调度动作
问题描述
我在这里与您联系有关ngrx 效果的信息,我要做的是拥有一个功能登录,该功能登录分配一个动作类型的登录,并且对该动作的影响将使用我的服务进行api 调用。在这个返回令牌之后,我想分派另外两个动作,一个是 getUserMenu 类型,一个是 getUserInfo 类型。这两个动作的类型不同,效果也不同。
最后我有 3 个商店:一个用于令牌,一个用于用户信息,一个用于菜单信息
我试过这样的事情:
login = createEffect(
() =>
this.actions$
.pipe(
ofType(authLogin),
tap(action => {
console.log("EFFECT LOGINNNN");
return this.authService.postLogin(action.username,
action.password).pipe(
map((data: any) => {
console.log("AUTHTHHTHTH DATATA ", data);
let props = data.token;
let payload = {
token: data.token,
isAuthenticated: true
}
this.store.dispatch(moMenuHttpGetListAction({US_ID: action.username}));
this.store.dispatch(userHttpGetInfoAction({US_ID:action.username}));
this.localStorageService.setItem(AUTH_KEY, payload);
}))
})
),
{ dispatch: true }
);
如果我设置dispatch false登录工作但没有调用获取用户信息和用户菜单的方法但是当我设置dispatch true时我有同样效果的无限循环,动作moMenuHttpGetListAction看起来像这样:
moMenuHttpGetListEffect = createEffect(
() => this.actions$.pipe(
ofType(moMenuHttpGetListAction),
switchMap(action => {
console.log("MOMENU LOGINNNN");
return this.moMenuService.getKmApplications(action.US_ID).pipe(
map((data: any) => {
console.log("MOMENU DATATA ", data);
console.log("MOMENU DATATA ", action.US_ID);
let payload = {
MO_MENU: data
}
this.store.dispatch(moMenuSetListAction({payload: data}));
this.localStorageService.setItem(MENU_KEY, payload);
}))
})
),
{ dispatch: false }
);
但是在这个上,当我将 dispatch 设置为 true 时,我得到了编译错误。我的动作看起来像:
import { createAction } from "@ngrx/store";
import { props } from "@ngrx/store";
import { MoMenu, MoMenuState } from "./mo_menu.models";
//TODO CHANGER ME_ID en US_ID
export const moMenuGetErrorAction = createAction("[User] Get Info");
export const moMenuGetIsLoadingAction = createAction("[User] Get Info");
export const moMenuSetErrorAction = createAction('[MoMenu] HTTP GET ACTION',
props<{error: string}>()
);
export const moMenuSetLoadingAction = createAction('[MoMenu] HTTP GET ACTION',
props<{loading: boolean}>()
);
export const moMenuHttpGetListAction = createAction('[MoMenu] HTTP GETLIST ACTION',
props<{US_ID: string}>()
);
export const moMenuHttpGetListErrorAction = createAction('[MoMenu] HTTP GET ACTION Error',
props<{error: any}>()
);
export const moMenuGetListAction = createAction("[MoMenu] Get List");
export const moMenuSetListAction = createAction("[MoMenu] Set Mo Menu List",
props<{payload: MoMenu[]}>());
export const moMenuDeleteAction = createAction("[MoMenu] Delete List");
这些是有人要求我补充的两个减速器:
Ngrx 对我来说有点新,所以我很想在这方面提供一些帮助 =)
import { AuthState } from './auth.models';
import { authLogin,
authLogout ,
authGetErrorAction,
authGetIsLoadingAction,
authSetErrorAction,
authSetIsLoadingAction
} from './auth.actions';
import { createReducer, on, Action } from '@ngrx/store';
export const initialState: AuthState = {
isAuthenticated: false,
token: undefined,
isLoading: false,
HttpResponse: undefined
};
const reducer = createReducer(
initialState,
on(authSetErrorAction, (state, { error }) => ({
...state, HttpResponse: error
})),
on(authSetIsLoadingAction, (state, { isLoading }) => ({
...state, isLoading: isLoading
})),
on(authLogin, state => ({ ...state, isAuthenticated: true })),
on(authLogout, state => ({ ...state, isAuthenticated: false }))
);
export function authReducer(
state: AuthState | undefined,
action: Action
): AuthState {
return reducer(state, action);
}
import { MoMenuState } from "./mo_menu.models";
import {
moMenuGetListAction,
moMenuDeleteAction,
moMenuHttpGetListAction,
moMenuSetListAction,
moMenuHttpGetListErrorAction,
moMenuGetErrorAction,
moMenuGetIsLoadingAction,
moMenuSetErrorAction,
moMenuSetLoadingAction
} from "./mo_menu.actions";
import { createReducer, on, Action } from "@ngrx/store";
export const initialState: MoMenuState = {
isLoading: false,
HttpResponse: undefined,
MoMenuItems: null
}
const reducer = createReducer(
initialState,
on(moMenuSetErrorAction, (state, { error }) => ({
...state, HttpResponse: error
})),
on(moMenuSetLoadingAction, (state, { loading }) => ({
...state, isLoading: loading
})),
on(moMenuHttpGetListErrorAction, (state, { error }) => (
undefined)),
on(moMenuSetListAction, (state, { payload }) => ({
...state, MoMenus: payload
})),
on(moMenuHttpGetListAction, (state, { US_ID }) => ({
...state
})),
on(moMenuGetListAction, state => state),
on(moMenuDeleteAction, state => state)
);
export function moMenuReducer(
state: MoMenuState | undefined,
action: Action
): MoMenuState {
return reducer(state, action);
}
如果你们中的一些人对我有任何想法?
解决方案
由于 NgRx 8 中的另一个操作,这就是我调度多个操作的方式:
@Injectable()
export class MyEffects {
myAction$ = createEffect(() =>
this.actions$.pipe(
ofType(myActions.firstAction),
switchMap(action => this.someService.getById(action.someId)),
switchMap((sth: Something) => [
myActions.firstActionSuccess({ payload: sth }),
myActions.secondAction({ payload: sth.xyz }),
// ... more actions
])
)
);
constructor(
private someService: SomeService,
private actions$: Actions
) { }
}
动作如下所示:
export const firstAction = createAction('First Action', props<{ someId: number }>());
export const firstActionSuccess = createAction('First Action Success', props<{ payload: Something }>());
export const secondAction = createAction('Second Action', props<{ payload: string }>());
希望有帮助!
推荐阅读
- c# - 如何将 blazor 组件设置为单次渲染?
- android - 如何使用 robotsium 测试 ListView 项目的 onClick 功能?
- c++ - 是否可以在线程内调用命令
- c# - 如何在 Aspnet Core 的授权标头中存储 JWT 令牌
- python - 为什么我在使用 xgboost 时会收到此 FutureWarning?
- javascript - TypeError:无法读取未定义的属性“反应”
- parsing - ANTLR 语法也可以识别数字键和整数
- jquery - jQuery特定位置检测滚动事件问题
- php - 代码保持打印相同的单词两次
- oracle11g - 在 oracle 中执行函数时跳过参数