Reindirizza il router di reindirizzamento dopo l'azione redux

Question

Sto utilizzando react-redux e standard react-routing. Ho bisogno di reindirizzare dopo un'azione definita.

Ad esempio: ho registrato alcuni passaggi. E dopo l'azione:

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

Voglio reindirizzare alla pagina con registrationStep2. Come farlo?

p.s. Nel browser storico '/ registrationStep2' non è mai stato. Questa pagina viene visualizzata solo dopo la pagina di registrazione dei risultati riuscita nella pagina iniziale.

Answer 1

Con Reagire Router 2+, ovunque vi invio l'azione, è possibile chiamare browserHistory.push() (o hashHistory.push() se è quello che si usa):

import { browserHistory } from 'react-router' 

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

Si può fare questo da creatori di azione asincrona anche se questo è quello che usi.

Answer 2

Avete controllato react-router-redux? Questa libreria consente di sincronizzare react-router con redux.

Ecco un esempio della documentazione di come è possibile implementare il reindirizzamento con un'azione push da react-router-redux.

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

Per costruire su di Eni Arinde risposta precedente (non ho la reputazione di commentare), ecco come utilizzare il metodo store.dispatch dopo un'azione asincrona:

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

Il trucco è quello di fare in i file di azione e non nei riduttori, poiché i riduttori non dovrebbero avere effetti collaterali.