我正在使用NgRx处理我的应用状态。
我有一个防滑垫组件来更改应用程序上的时间。
当用户更改滑块值时,会在应用程序状态下更新实际行程列表,然后在管图SVG组件上显示。
行程进度是根据在滑块上选择的时间以及到达和离开时间来计算的。
我能够做到。
我的问题是何时更新所选时间。实际行程列表不会在商店中快速更新,因此所选时间将应用于旧行程预订的值,然后应用于新行程值(当它们在商店中更新时)。
由于可观察性不好,我认为这是一个异步问题,但是我可以找到更好的方法。
这是我的实现方式
selectedDate$ = this.store.pipe(select(selectDateTimeSelect));
this.selectedDate$
.pipe(
switchMap(elm => {
this.selectedTime = elm.timeSelect; // get actual Time selected
this.store.dispatch(new GetSchedulesByTime(elm.timeSelect.toString()));
return this.store.pipe(select(selectSchedulings)); // return new scheduling data ( may be here the update still not happened ? )
})
)
.subscribe((schedules: ISchedule[]) => { // subscribe to that new data
..... treatment....
})
这是减速器
case ESchedulesActions.GetSchedulesByTime: {
let time = action.payload;
return { ...state, actualTrips: [...(state.schedulings[time] || [])] };
}
然后选择器
export const selectSchedulings = createSelector(
schedulings,
(state: ISchedulesState) => state.actualTrips
);
由于复制并不简单,所以我无法提供有效的演示。 我想我提供了很多要素。
在进行治疗之前,如何确定实际出行是否已更新?
更新 我正在尝试将动作链接到效果中
$updateActualTrips = createEffect(() =>
this.actions$.pipe(
ofType<any>(ESelectDateTimeActionTypes.SetSelectDateTime),
switchMap(action => ({ type: ESchedulesActions.GetNextSchedulesByTime, payload: action.payload }))
)
);
但我收到此错误
Type 'Observable<unknown>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'.
Property 'type' is missing in type '{}' but required in type 'Action'.
答案 0 :(得分:1)
最简单(但不太漂亮)的解决方案是
return this.store.pipe(select(selectSchedulings), skip(1));
更漂亮的解决方案是,每当schedulings
发生更改时,都通过reducer更新商店中的selectedDate
。这样,您无需为此发送单独的操作