Действия во вложенном хранилище не синхронизированы - PullRequest
0 голосов
/ 28 октября 2019

Я использую 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'.

1 Ответ

1 голос
/ 28 октября 2019

самое простое (но не слишком красивое) решение -

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

Более красивое решение - обновлять schedulings в вашем магазине через редуктор каждый раз, когда меняется selectedDate. Таким образом, вам не нужно отправлять отдельное действие для этого

...