reactjs - redireccionar - Reaccionar enrutador redirigir después de acción redux

redirect react js react router dom

Question

Estoy usando react-redux y routing de reacción estándar. Necesito redirigir después de una acción definitiva.

Por ejemplo: tengo registro unos pocos pasos. Y después de la acción:

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

Quiero que lo redirija a la página con registrationStep2. ¿Cómo hacerlo?

ps En el navegador de historial ''/ registrationStep2'' nunca ha estado. Esta página aparece solo después de la página exitosa de registro de resultados.

Answer 1

¿Has revisado github.com/reactjs/react-router-redux ? Esta biblioteca hace posible sincronizar react-router con redux.

Aquí hay un ejemplo de la documentación de cómo puede implementar la redirección con una acción push desde reaccionar-enrutar-reducir.

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 2

Con React Router 2+, dondequiera que browserHistory.push() la acción, puede llamar a browserHistory.push() (o hashHistory.push() si eso es lo que usa):

import { browserHistory } from ''react-router''

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

También puedes hacer esto desde creadores de acciones asíncronas si eso es lo que usas.

Answer 3

Para construir sobre las respuestas anteriores de Eni Arinde (no tengo la reputación para comentar), aquí se muestra cómo usar el método store.dispatch después de una acción asíncrona:

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

El truco está en hacerlo en los archivos de acción y no en los reductores, ya que los reductores no deberían tener efectos secundarios.

Answer 4

Puedes usar { withRouter } desde '' withRouter -router-dom''

El ejemplo siguiente muestra un envío para enviar

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)));
  }
}

Los argumentos del historial se asignan en el componente como el segundo parámetro del creador de la acción (en este caso, ''registerUser'')

Answer 5

      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/>
)
     }