typescriptreact-routerredux-observable

How do I listen to '@@router/LOCATION_CHANGE' action from typesafe redux-observable epic


I'm trying listen to '@@router/LOCATION_CHANGE' action from typesafe redux-observable epic, and I just don't understand how.

  1. What is the exact action I need to filter? I tried 'filter(onLocationChanged)' unsuccessfully.
  2. What is the right 'IN' type? With 'LocationChangeAction' and 'filter(onLocationChanged)' I get type error:

No overload matches this call.

  1. Finally, how do I get the locations changed by the '@@router/LOCATION_CHANGE' action? (before and after)
import { Epic } from "redux-observable";
import { of } from "rxjs";
import { filter, withLatestFrom, concatMap } from "rxjs/operators";
import { AppState } from "../../reducer";
import { CallHistoryMethodAction, LOCATION_CHANGE, push, onLocationChanged, RouterActionType, LocationChangeAction } from 'connected-react-router';


type IN = LocationChangeAction;
type OUT = ReturnType<typeof somthing>;

export const LocationListenEpic: Epic<IN | OUT, OUT, AppState> = (
    action$,
    state$
) => 
    action$.pipe(
        filter(onLocationChanged),
        withLatestFrom(state$),
        concatMap(([{ payload }, state]) => {

            console.log(currentLocation);
            return []
}

Solution

  • After digging deeper into how redux-observable epics works:

    
    import { getLocation } from 'connected-react-router'
    
    type IN = LocationChangeAction;
    type OUT = ReturnType<typeof somthing>;
    
    export const LocationListenEpic: Epic<IN | OUT, OUT, AppState> = (
        action$,
        state$
    ) => 
        action$.pipe(
            filter(action => action.type == LOCATION_CHANGE),
            withLatestFrom(state$),
            concatMap(([{ payload }, state]) => {
    
                console.log(getLocation(store.getState()));
                return []
    }