Используете повторение действий redux-devtools в angular?

Question

У меня есть этот сценарий:

• Я открываю redux-devtools.
• Нажмите на ссылку на странице.
• Ссылка ведет меня ко второй странице, которая запускает эффект избыточности, который будет возвращать другое действие, которое при уменьшении изменит состояние с информацией, необходимой для страницы.

Когда я пытаюсь пересмотреть мои шаги и нажимаю кнопку воспроизведения в redux-devtools, я ожидаю, что это произойдет:

• Приложение переходит на первую страницу.
• Приложение переходит на вторую страницу и отображает информацию о состоянии.

Что на самом деле происходит:

• Приложение переходит на первую страницу.
• Приложение переходит на вторую страницу, а затем срабатывает эффект, а затем отправляется на сервер, получает новые данные и отображает их на странице.

Насколько я понимаю, функция воспроизведения должна воспроизводить вещи в точности так, как они происходили, используя состояние после каждого действия, не вызывая никаких эффектов.

В настоящее время я использую чистый Redux для реализации Redux. Наблюдаемый за редуксом эффект и, конечно, угловой 4+.

Я отправляю действие, которое запускает эффект на OnInit в компоненте. Я думаю, что упускаю что-то большое и делаю что-то глупое.

Что мне здесь не хватает?

Вот как я создаю магазин:

public initStore(enhancers: any[] = []) {

    const rootEpic = (action$: any, store: any) => this.epics$.mergeMap(epic => epic(action$, store));

    const middleware = [
        createEpicMiddleware(rootEpic),
        freezeMiddleware,
    ];

    const enhancer = compose(
        applyMiddleware(...middleware),
        ...enhancers
    );

    this.store = createStore<any>(this.createReducer(), enhancer);

    return this.store;
}

И это AppModule Ctor:

constructor(ngRedux: NgRedux<any>, reduxRouter: ReduxRouter, devTools: DevToolsExtension) {

    reduxRouter.init(state => state.router);

    const enhancers = devTools.isEnabled() ? [devTools.enhancer()] : [];

    ngRedux.provideStore(reduxState.initStore(enhancers));

    reduxState.addReducers({
        settings: settingsReducer,
        global: globalErrorReducer,
        session: userSessionReducer,
    });

    reduxState.addEpics({
        explicitRouterEpic,
        logEpic: (actions$: any, store: any) => actions$.do(console.log).filter((x: any) => false),
    });
}