Reactor Router Redirect nach Aktion Redux

Question

Ich benutze react-redux und Standard react-Routing. Ich muss nach einer bestimmten Aktion umleiten.

Zum Beispiel: Ich habe Registrierung ein paar Schritte. Und nach der Aktion:

function registerStep1Success(object) { 
    return { 
     type: REGISTER_STEP1_SUCCESS, 
     status: object.status 
    }; 
} 

Ich möchte ihn umleiten, um Seite mit RegistrierungStep2 Seite. Wie es geht?

p.s. In der Geschichte Browser '/ registrationStep2' war noch nie. Diese Seite wird nur nach erfolgreicher ErgebnisregistrierungStep1-Seite angezeigt.

Answer 1

Mit React Router 2+, wo Sie die Aktion versenden, können Sie browserHistory.push() nennen (oder hashHistory.push() wenn das, was Sie verwenden):

import { browserHistory } from 'react-router' 

// ... 
this.props.dispatch(registerStep1Success()) 
browserHistory.push('/registrationStep2') 

Sie können dies von Asynchron-Aktion Schöpfer auch wenn das ist was du benutzt.

Answer 2

Haben Sie react-router-redux ausgecheckt? Diese Bibliothek ermöglicht es, react-router mit redux zu synchronisieren.

Hier ist ein Beispiel aus der Dokumentation, wie Sie die Umleitung mit einer Push-Aktion von react-router-redux implementieren können.

import { routerMiddleware, push } from 'react-router-redux' 

// Apply the middleware to the store 
const middleware = routerMiddleware(browserHistory) 
const store = createStore(
    reducers, 
    applyMiddleware(middleware) 
) 

// Dispatch from anywhere like normal. 
store.dispatch(push('/foo')) 

Answer 3

aufbauen Eni Arinde vorherige Antwort der (I Kommentar nicht den Ruf hat), ist hier, wie die store.dispatch Verfahren nach einer Asynchron-Aktion verwenden:

export function myAction(data) { 
    return (dispatch) => { 
     dispatch({ 
      type: ACTION_TYPE, 
      data, 
     }).then((response) => { 
      dispatch(push('/my_url')); 
     }); 
    }; 
} 

Der Trick, es zu tun ist in die Actionfiles und nicht in den Reducern, da Reducer keine Nebenwirkungen haben sollten.