你好,我是NgRx应用程序的新手,对于如何解决这个特殊问题有太多的困惑。我想检查存储中的数据,如果数据是空的,只有这样,我才想使用NgRx效果继续进行api调用。
在尝试了不同的事情后,今天花了一整天的时间,我放弃了,想从这里得到一些专家的指导。
下面是我的全部代码:
analytics.effects.ts
@Injectable()
export class AnalyticsEffects {
@Effect({dispatch: false}) loadAnalytics = this.actions$
.pipe(
ofType<GetAnalyticsAction>(AnalyticsTypes.GET_ANALYTICS),
withLatestFrom(**/* cannot make this line to work */**),
mergeMap(
/* api call to get analytics data from server */
() => this.analyticsService.getAnalyticsData()
.pipe(
map(data => {
console.log('the data from api is...', data);
return new GetAnalyticsAction(data)
}),
catchError(error => of(console.log("error in api request of analytics....")))
)
)
)
constructor(
private actions$: Actions,
private analyticsService: AnalyticsService,
private store$: Store<AnalyticsState>
) { }
} analytics.action.ts
import {Action} from '@ngrx/store';
import {AnalyticsModel} from './analytics.model';
import {AnalyticsTypes} from './analytics.types';
export const GET_ANALYTICS = AnalyticsTypes.GET_ANALYTICS;
export class GetAnalyticsAction implements Action{
readonly type = GET_ANALYTICS;
constructor(public payload: AnalyticsModel) {
console.log('payload sent from home is -> ', payload);
}
}
export type Actions = GetAnalyticsActionanalytics.state.ts
import {AnalyticsModel} from './analytics.model';
export interface AnalyticsState {
readonly analyticsModel: AnalyticsModel[];
}analytics.reducer.ts
import {Action} from '@ngrx/store';
import {AnalyticsModel} from './analytics.model';
import * as AnalyticsAction from './../analytics/analytics.actions';
const defaultState: AnalyticsModel = {
result: null,
}
export function reducer(state: AnalyticsModel[] = [defaultState], action: AnalyticsAction.Actions ){
switch (action.type) {
case AnalyticsAction.GET_ANALYTICS:
console.log("store action type is -> ",action.type);
console.log("store changed state is -> ",action.payload);
return [...state, action.payload]
default:
return state
}
}mypage.component.ts
最后,我使用dispatcher在组件文件中触发相应的操作:
constructor(private store: Store<AnalyticsState>) {
this.analyticsModel = store.select( state => {state.analyticsModel} );
}
ngOnInit() {
this.store.dispatch(new ActionGetAnalytics.GetAnalyticsAction(this.newAnalyticsItem));
this.newAnalyticsItem = { result: [] };
}我想要什么
我只想知道,在使用withLatestFrom访问api之前,如何使用上面effects.ts文件中的effects.ts来检查存储在存储中的数据是否为空。如果存储在存储中的数据没有变化,我不希望应用程序重复加载api。
我试过什么
我完全用尽了我自己寻找不同的选择从官方文件,也提到了一些相同的问题张贴在这里。但是,我没有得到任何帮助,因为我根本不知道根据我的代码,什么样的参数会进入'withLatestFrom‘,这可以帮助我有条件地检查现有的数据。
如果你有指点的话,请帮帮我。谢谢。
发布于 2020-07-23 15:22:57
看看我的帖子为此开始使用ngrx/effects。
@Effect()
shipOrder = this.actions.pipe(
ofType<ShipOrder>(ActionTypes.ShipOrder),
map(action => action.payload),
concatMap(action =>
of(action).pipe(
withLatestFrom(this.store.pipe(select(getUserName)))
)
),
map([payload, username] => {
...
})
)https://stackoverflow.com/questions/63055368
复制相似问题