我正在尝试使用 NgRx 12 中引入的最新 concatLatestFrom 获取 2 个选择器，但是我似乎无法理解我做错了什么，并且我无法实现这一点。
\n我有一个看起来像这样的效果
\n loadAllCases$ = createEffect(() => this._actions$.pipe(\n concatLatestFrom(() => [\n this.store.pipe(select(CaseSelectors.getAllCases)),\n this.store.pipe(select(CaseSelectors.getCasesLoaded))\n ]),\n navigation(this.caseLandingPage, {\n run: (snap, [loaded, cases]) => {\n if (loaded) {\n return CaseActions.loadAllSuccess();\n } else {\n return this._caseService.getAll().pipe(\n map(cases => CaseActions.loadAllSuccess(cases))\n );\n }\n },\n onError: (action, error) => {\n return CaseActions.loadAllFailed(error);\n }\n })\n ));\n\n然而，由于类型不兼容，这似乎不起作用
\nArgument of type \'OperatorFunction<Action, [Action, boolean, Case[]]>\' is not assignable to \nparameter of type \'OperatorFunction<Action, ActionOrActionWithState<unknown, Action>>\'. \nType \'[Action, boolean, Case[]]\' …如果我在我的app模块中声明,我试着理解ngrx中的typeof效果是如何工作的:
....
@NgModule({
imports: [
EffectsModule.forRoot([TodosEffectsService])
],
....
我写效果文件肯定:
@Effect() createTodos$ = this.actions$
.ofType(CREATE_TASK)
.map(() => {
console.log('called');
return { type: 'OTHER'};
});
@Effect() addTodos$ = this.actions$
.ofType(CREATE_TASK)
.map(() => {
console.log('called');
return { type: 'OTHER'};
});
我试着理解,现在在运行时我调度一个动作this.action $订阅并且每次执行ofType以匹配类型？orType一旦执行!？
如果它调用了一次,当我发出动作时,效果如何知道每次做出订阅/执行的效果？
谢谢大家!
我有效果类,我想根据路由器参数ID加载详细信息
@Effect()
getDetails$ = this.actions$.ofType(DetailActions.GET_DETAILS).pipe(
map(toPayload),
switchMap(payload => {
return this.detailService
.getDetail(payload)//I want router params here in payload
.pipe(
map(detail=> new DetailActions.GetDetailSuccess(detail)),
catchError(error =>
Observable.of(new DetailActions.GetDetailFail(error))
)
);
})
);
我想在有效负载中获取路由器参数,这样我就不必从组件传递有效负载,而是直接从特技类中获取它.
所以我通过构建以下沙箱来试验ngrx&ngrx/effects:
https://stackblitz.com/edit/ngrx-vanilla
快速介绍:
三页:
问题和背景:
收到更新后(在app/store/effects/meeting.effects.ts中说明),将调度新操作.
最后,问题是:让一个共同的服务了解商店是一种干净的做法吗？将一个监听器注册到websocket/firebase实时数据库以便在推送数据时调度操作的最佳位置在哪里？
在这里,我做了一个效果(meeting.effects)对meetingActions.START_MEETING操作类型做出反应,每当推送数据时,都会向商店发送更新订单,但由于我提出的一系列原因,这感觉不对:
这些案件通常如何处理？
Angular路由器在NgRx效果中是否有任何限制？
我刚开始学习NgRx,我有以下代码:
@Effect() public authenticate$ = this.actions$
.ofType(authenticationActions.AUTHENTICATE)
.switchMap((action: AuthenticateAction) => this.authenticationService.authenticate(action.payload)
.map((data: TokenData) => {
const user: User = {
token: data.token,
username: 'dummy',
};
console.log(data);
this.router.navigateByUrl('/');
return new authenticationActions.AuthenticateSuccessAction(user);
})
.catch(error => { console.log(error); return Observable.throw(error); })
);
控制台记录数据变量并AuthenticateSuccessAction触发操作,因此正在执行路由器线,但导航不会发生.
我正在使用 Angular 6、ngrx/store、ngrx/effects。我有一个应该在我按下“保存”按钮时触发的效果。我正在使用withLatestFrom那里收集将其发送到服务器所需的所有数据：
@Effect({dispatch: false})
saveAll$ = this.actions$.pipe(
ofType(ActionTypes.Save),
withLatestFrom(
this.store.select(fromReducers.getData1),
this.store.select(fromReducers.getData2),
this.store.select(fromReducers.getData3),
this.store.select(fromReducers.getData4)
),
switchMap(([action, data1, data2, data3, data4]: [ActionType, Data1[], Data2[], Data3[], Data4[]]) => {
// here is some operations with these data
return this.apiService.saveData({data1, data2, data3, data4})
})
)
这是getData1选择器：
export const getData1= createSelector(
getItems,
getIndexes,
(items, indexes) => {
console.log('HI, I AM getData1');
return transformItems(items, indexes);
}
);
getItems，反过来，返回state.items。问题是state.items可以修改成另一种效果：
@Effect()
handleItemsChanges$ = this.actions$.pipe(
ofType(ActionTypes.ChangesInItems),
withLatestFrom(
this.store.select(fromReducers.getItems),
this.store.select(fromReducers.getUsers), …我目前正在规划一个大规模的 Angular 6 应用程序，并试图找到一种最适合团队需求的方法来处理副作用。
我意识到在 Ngrx 生态系统中最常用的方法是使用ngrx/effects库，我想知道与thunk方法相比使用它有什么优势，thunk方法似乎是 React 最流行的方法应用。
我的想法是将所有引起副作用的逻辑隔离在一个地方，我总是倾向于将它们隔离在 Action Creators 范围内。将所有副作用逻辑移动到不同的“抽象层”感觉就像会增加编写副作用动作的开销，而没有可观的附加值，因为大多数“强烈逻辑”动作用于处理副作用。
有没有其他理由支持效果而不是 thunk？Angular 中的 ngrx 和 React 的经典 Redux 之间有什么根本区别，这使得 ngrx/effect 成为更好的选择吗？
我正在尝试@Effect()为我的操作创建一个。当我使用 type 运行 action 时，AuthenticationUserLoad出现错误。
ERROR Error: Effect "AuthenticationEffects.getUser$" dispatched an invalid action: [object Object]
这是我的Effect代码
@Effect()
getUser$ = this.actions$.pipe(
ofType(AuthenticationUserActions.AuthenticationUserTypes.AuthenticationUserLoad),
map((action) => {
return this.authService.getUser().pipe(
map((user: User) => new AuthenticationUserActions.AuthenticationUserLoadSuccess({user})),
catchError(error => of(new AuthenticationUserActions.AuthenticationUserLoadFailure({error})))
);
})
);
更新
我改变map了switchMap，它的工作原理。
@Effect()
getUser$ = this.actions$.pipe(
ofType(AuthenticationUserActions.AuthenticationUserTypes.AuthenticationUserLoad),
switchMap((action) => {
return this.authService.getUser().pipe(
map((user: User) => new AuthenticationUserActions.AuthenticationUserLoadSuccess({user})),
catchError(error => of(new AuthenticationUserActions.AuthenticationUserLoadFailure({error})))
);
})
);
也许我不明白 map 和 switchMap 之间的区别。
I have an @Effect that uses a MemoizedSelector to grab an item from the redux store and mergeMap it with the payload of an Action. The effect works just fine, however setting up the Jest tests for this has proven difficult as I cannot seem to mock the return value of the selector due to select being a declared function that's imported (from '@ngrx/store') and used in the effect and the selector itself being an imported function as well. …
我在这里就 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 我有 infinit 循环同样的效果，动作 moMenuHttpGetListAction 看起来像这样：
moMenuHttpGetListEffect = createEffect(
() => this.actions$.pipe( …angular ×10
ngrx ×10
ngrx-effects ×10
ngrx-store ×5
javascript ×2
redux ×2
typescript ×2
nrwl-nx ×1
redux-thunk ×1
rxjs ×1