Action on canceled observable - redux

Question

Hello and thanks in advance :)
Main Idea
I want to launch specific action$ epics from redux-observable depends on route and cancel them when route changes.
Also I want to handle some clean up when epics are canceled. I have done it. But:
Problem
I'm using state.dispatch(actions.signInError({})) to clean up (that is deprecated), and don't know how to do it another way. My code is below, problem at the very end.
Change epics when route is changed
/**
* Launch route specific actions if such exist and cancel previous one
*
* #param {Function} action$ - redux-observable action$
* #param {Object} state - redux state
*/
const addEpicsForRoute = (action$, state) => action$
.ofType(LOCATION_CHANGE) // action from route
.switchMap(
( action ) => {
// get epics for route
const epicsForRoute = routeEpics[ action.payload.pathname ];
if ( epicsForRoute ) {
return merge(
...epicsForRoute.map(observableCreator => observableCreator(action$, state))
);
} else {
return empty(); // no specific epics
}
}
);
Some specific epic for some route
/**
* Handle xhr request-response/error logic of sign in user
*
* #param {Function} action$
* #param {Object} state
*/
export const signIn = ( action$, state ) => {
return action$
.ofType(types.SIGN_IN_REQUEST)
.mergeMap(( { params, } ) => (
Observable.create(observer => {
services
.signInRequest( // it is ajax observable
mappers.mapSignInRequest(params)
)
.map(response => actions.signInJWTSuccess( // dispatch success
mappers.mapUser(response)
))
.catch(error => of(actions.signInError( // dispatch error
mappers.mapSignInError(error)
)))
.subscribe(( value ) => { // pass action to redux-store
observer.next(value);
});
return () => {
// cleanup logic. HERE IS A PROBLEM
// calling store.dispatch() directly in your Epics is deprecated and will be removed.
// what should I use instead?
state.dispatch(actions.signInError({}));
};
})
));
};
Also I am new for rxjs and if you have an advice how I can improve or make look code prettier I'm more than interested!

Answer 1

I suggest to review the flow of the code to leverage more the power of Observables operators.
An idea could be to move along these lines
export const signIn = ( action$, state ) => {
return action$
.ofType(types.SIGN_IN_REQUEST)
.switchMap(( { params, } ) => (services.signInRequest( // it is ajax observable
mappers.mapSignInRequest(params)
))
.map(response => actions.signInJWTSuccess( // dispatch success
mappers.mapUser(response)
))
.catch(error => of(actions.signInError( // dispatch error
mappers.mapSignInError(error)
)))
};
In this way you have created a function, signIn, that returns an Observable which emits the result of the signIn ajax call.
Then, I would create another piece of logic to subscribe to such Observable returned by signIn and decide what to do, e.g.
const subscription = signIn(action, state)
.subscribe(
value => {// do what needs to be done with the result of the signIn call},
err => {// insert here the logic to handle error conditions},
() => {// do here what needs to be done when the Observable completes
// consider that ajax calls complete after the first emit, therefore
// you can put this part of logic also within the first callback, the one passed as the first parameter to subscribe() method
}
)
Note that you are also storing the subscription in a variable, that you can use to unsubscribe when the route changes.
The cleanup logic you are putting in the function returned by the create method should be probably moved to the place where you actually unsubscribe the subscription because you move to another route.

Answer 2

I think a good question is whether this is correct expectation. When you use switchMap you unsubscribe from the inner Observable which means you no longer want to receive its emissions. So does it make sense that it'll emit yet another action when you unsubscribe?
Anyway you could merge another Observable to the chain that emits only the cleanup actions.
const action$ = new Subject();
const cleanup$ = new Subject();
action$
.pipe(
switchMap(() => new Observable(observer => {
// whatever goes here
observer.next('Observable created');
return () => {
cleanup$.next(/* create proper action here */ 'cleanup');
};
})),
merge(cleanup$),
)
.subscribe(console.log);
action$.next(1);
action$.next(2);
I'm not using real redux-observable actions but I hope you get the point.
Live demo (open console): https://stackblitz.com/edit/rxjs5-9iogn1?file=index.ts