angular - 角度:ngrx 效果不触发
问题描述
我已经开发了一些实现 Redux (NgRx) 的 Angular 应用程序。我无法弄清楚我当前项目的问题。
行动:
export class GetUserFromStorage implements Action {
readonly type = UserActionTypes.GetUserFromStorage;
}
export class GetUserFromStorageSuccess implements Action {
readonly type = UserActionTypes.GetUserFromStorageSuccess;
constructor(public payload: User | null) { }
}
export class GetUserFromStorageFail implements Action {
readonly type = UserActionTypes.GetUserFromStorageFail;
constructor(public payload: string) { }
}
减速器:
case UserActionTypes.GetUserFromStorageSuccess:
return {
...state,
user: action.payload,
error: ''
};
case UserActionTypes.GetUserFromStorageFail:
return {
...state,
error: action.payload
};
效果:
@Effect() getUserFromStorage$:
Observable<userActions.GetUserFromStorageSuccess | userActions.GetUserFromStorageFail>
= this.actions$.pipe(
ofType(userActions.UserActionTypes.GetUserFromStorage),
tap(() => console.log('GETUserToStorage$', )),
mergeMap((action: userActions.GetUserFromStorage) =>
this.storageService.getItem(StorageKeys.USER).pipe(
map((user: User | null) =>
new userActions.GetUserFromStorageSuccess(user)),
catchError((error: string) =>
of(new userActions.GetUserFromStorageFail(error)))
))
);
在 auth.service.ts 中,我订阅了 Store 并调度了一些 Action。
this.store.dispatch(new userActions.GetUserFromStorage());
this.store.pipe(select(userReducer.getUser)).subscribe(
(user: User) => {
console.log('user TEST: ', user);
this.user = user;
}
);
我已经安装了 ReduxDevTools。GetUserFromStorage 操作会触发,但不会触发 getUserFromStorage$ 效果。'user TEST' 的 console.logged 值显示 'user' 为 'null'。任何想法,任何人?谢谢你。
解决方案
确保您实际上已经“激活”了它们。
可注射效果:
@Injectable()
export class FooEffects {
@Effect() getUserFromStorage$:
Observable<userActions.GetUserFromStorageSuccess | userActions.GetUserFromStorageFail>
= this.actions$.pipe(
ofType(userActions.UserActionTypes.GetUserFromStorage),
tap(() => console.log('GETUserToStorage$', )),
mergeMap((action: userActions.GetUserFromStorage) =>
this.storageService.getItem(StorageKeys.USER).pipe(
map((user: User | null) =>
new userActions.GetUserFromStorageSuccess(user)),
catchError((error: string) =>
of(new userActions.GetUserFromStorageFail(error)))
))
);
}
app.module.ts
:
import {EffectsModule} from '@ngrx/effects';
imports: [
EffectsModule.forRoot([
FooEffects
])
]
推荐阅读
- sql - SQL group by - 如何按两列分组,日期和小时
- python - 聚合模型
- grafana-loki - 如何分析loki存储空间?
- apache-zookeeper - 当被选为领导者的节点出现故障时会发生什么?
- python - Python3 对 IP 地址 4、6 和主机名进行排序
- try-catch - 我正在尝试在 try/catch 函数中使用函数“chekPersonalNumber”,但仅在“chekPersonalNumber”为真时才适用于我的代码的第一部分
- r - 如何使用ggplot在一个圆圈内随机散布点,而不围绕中心聚集?
- javascript - javascript: JSON.Stringify 不显示整个对象
- sql - 在 SQL Server 中比较表中两列性能的替代方法
- android - 如何投射原生上下文以响应原生上下文