Reagieren Redux mit redux beobachtbare Verwendung des Routers auf eine andere Seite nach async Aktion abgeschlossen

Question

ich redux-observable bin mit zu navigieren und das ist mein Login Epos:

const login = (action$) => { 
    return action$.ofType(SessionActions.LOGIN_USER) 
     .flatMap(({payload}) => { 
     return sessionService.login(payload) 
      .do(payload => { 
      sessionService.setSession(payload)); 
      // Here I want to redirect the user back to his last location 
      }).map(result => ({ 
      type: SessionActions.LOGIN_SUCCESS, 
      payload: result 
      })); 
     }); 
    } 

Aber wie ich leitet den Benutzer auf einen anderen Seite nach dem Login-Aktionserfolg.

Was ist der Redux-Weg, dies zu tun?

Answer 1

Ich bin völlig neu zu reagieren/Redux, aber ich habe das gleiche Problem wie Sie, so dass ich eine kleine APP mit einer Login-Seite erstellen.

// On your Login.JS you could implement the component lifecycle 

componentWillReceiveProps(nextProps) { 
    if (nextProps.isAuthenticated){ 
     this.context.router.push({pathname:'/'}); 
    } 
} 

Also, wenn Sie Ihre ‚Aktion‘ senden an die ‚Minderer‘ der Typ: login_success Sie gehen den entsprechenden Zustand zu ändern und wenn die Komponente ‚erhalten Requisiten‘ Ihr zu überprüfen umzuleiten gehen. Ich hoffe dieses kleine Beispiel hilft dir.

Answer 2

Wenn Sie redux-observable mit react-router-redux verwenden, können Sie alle Umleitungen in Ihrem Epen tun:

import { ajax } from 'rxjs/observable/dom/ajax'; 
import { push } from 'react-router-redux'; 
import NProgress from 'nprogress'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap'; 

export default function login(action$) { 
    return action$.ofType('LOGIN_USER') 
    .do(() => NProgress.start()) 
    .mergeMap(payload => (
     // Call your login service here, please note that it must be an observable to continue in your epic chain. 
     Observable.fromPromise(sessionService.setSession(payload)) 
     // This is the redirect you're looking for, it's now became an action thanks to react-router-redux :) 
     .mapTo(push({ url: '/' })) 
     .do(() => NProgress.done()) 
)); 
} 

Ich habe hinzugefügt, auch eine Fortschrittsanzeige für die Bonuspunkte :) Es ist konstruiert mit Hilfe von redux-observable's own navigation example