How to wait or listen for Url has changed using rxjs and redux-observable?

Question

I'm trying to show modal popup after I received response data and after I go to another page. Hot to implement this correctly?

Iuse React-observable and rxjs . I did create an epic using with requests to server and changing history.location. It works fine

action$.pipe(
    ofType(myActionLading),
    mergeMap(action => of(convertDataToServer(action.payload))),
    mergeMap(data =>
      from(convertToDataAPI(data)).pipe(
        mergeMap(response => of(convertCustomerFromServer(response.
        mergeMap(() => {
         return of(
          actionGetDataInfoLoading({ id }),
          );
        }),
        tap(() => history.push('/newRoute')),
takeUntil(// I have to verify if I am already on my newRoute and then show the popUp),
        finalize(() => console.log('!!! FIN !!!') || 
          modals.getModalSuccess()),
   ),
    ),

I want to see the 'Success' modal popup after I am on a new route. So I want to listen history.push, or verify if I am on a new route and only then to show the modal

Answer 1

I don't believe it's possible to execute that logic the way you explained it (with react-router atleast).

However, if /newRoute is only reachable through the success of this action, you could just open the modal when the component corresponding to newRoute mounts.

Otherwise, provide a query param to determine whether or not you would like to open the modal.

For example:

// someEpic.js
tap(() => history.push('/newRoute?showModal=true')

...

//newRoute.jsx (The component)
export class NewRoute extends React.Component {
   ...
   componentWillMount() {
       const showModal = this.props.... // logic to get query param of showModal.

       if (showModal) {
          modals.getModalSuccess();
       }
   }
}