I have this scenario:
- I open redux-devtools.
- Click on a link on the page.
- The link leads me to a second page that starts a redux effect that will return another action that when "reduced" will change the state with the information needed for the page.
When I try to retrace my steps and click the play button in redux-devtools I expect this to happen:
- The app navigates to the first page.
- The app navigates to the second page and displays the information from the state.
What actually happens is:
- The app navigates to the first page.
- The app navigates to the second page and then the effect triggers and it goes to the server and fetches new data and displays it on the page.
My understanding is that the replay functionality should replay things exactly as they happened using the state after each action, without triggering any effects.
I currently use pure redux for the Redux implementation. redux-observable for effects and of course angular 4+.
I dispatch the action that starts the effect on OnInit in the component. I think I'm missing something big and am doing something stupid.
What I'm I missing here?
Here is how I create the store:
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;
}
And this is the 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),
});
}