web-dev-qa-db-fra.com

Réagir routeur redirection après action redux

J'utilise react-redux et react-routing standard. J'ai besoin de redirection après une action définie.

Par exemple: je dois m'inscrire quelques étapes. Et après l'action:

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

Je veux qu'il redirige vers la page avec registrationStep2. Comment faire?

p.s. Dans l'historique, le navigateur '/ registrationStep2' n'a jamais été. Cette page apparaît uniquement après la réussite de la page registrationStep1.

reactjsreact-routerreduxredux-framework
35
ximet

Avec React Router 2+, où que vous envoyiez l'action, vous pouvez appeler browserHistory.Push() (ou hashHistory.Push() si c'est ce que vous utilisez):

import { browserHistory } from 'react-router'

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

Vous pouvez également le faire à partir de créateurs d’actions asynchrones si c’est ce que vous utilisez.

47
Dan Abramov

Avez-vous vérifié react-router-redux ? Cette bibliothèque permet de synchroniser react-router avec redux. 

Voici un exemple de la documentation montrant comment vous pouvez implémenter la redirection avec une action Push de 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'))
20
Eni Arinde

Pour reprendre les réponses précédentes d’Eni Arinde (je n’ai pas la réputation de commenter), voici comment utiliser la méthode store.dispatch après une action asynchrone:

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

L'astuce consiste à le faire dans les fichiers d'action et non dans les réducteurs, car les réducteurs ne doivent pas avoir d'effets secondaires.

4
Mathieu Nohet

      signup = e => {
        e.preventDefault();
        const { username, fullname, email, password } = e.target.elements,
          { dispatch, history } = this.props,
          payload = {
            username: username.value,
            //...<payload> details here
          };
        dispatch(userSignup(payload, history));
        // then in the actions use history.Push('/<route>') after actions or promises resolved.
      };

    render() {
       return (
       <SignupForm onSubmit={this.signup} />
        //... more <jsx/>
)
     }

0
Saad Abbasi

Vous pouvez utiliser { withRouter } depuis 'react-router-dom'

L'exemple ci-dessous illustre une dépêche à pousser

export const registerUser = (userData, history) => {
  return dispatch => {
    axios
    .post('/api/users/register', userData)
    .then(response => history.Push('/login'))
    .catch(err => dispatch(getErrors(err.response.data)));
  }
}

Les arguments d'historique sont affectés dans le composant en tant que deuxième paramètre du créateur de l'action (dans ce cas, 'registerUser')

0
milesr