Question

我正在使用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'.

Answer 1

最简单（但不太漂亮）的解决方案是

return this.store.pipe(select(selectSchedulings), skip(1));

更漂亮的解决方案是，每当schedulings发生更改时，都通过reducer更新商店中的selectedDate。这样，您无需为此发送单独的操作

嵌套存储操作未同步

1 个答案: