example - react-router-redux

¿Cómo manejar la ruta de cierre de sesión en Redux?

Question

Quiero definir una URL que podría utilizarse para cerrar la sesión del usuario (despachar una acción que cerraría la sesión del usuario). No he encontrado ejemplos que muestren cómo implementar una ruta que despache un evento.

Answer 1

Definir una ruta /authentication/logout :

import React from ''react'';
import {
    Route,
    IndexRoute
} from ''react-router'';
import {
    HomeView,
    LoginView,
    LogoutView
} from ''./../views'';

export default <Route path=''/''>
    <IndexRoute component={HomeView} />

    <Route path=''/authentication/logout''component={LogoutView} />
    <Route path=''/authentication/login'' component={LoginView} />
</Route>;

Cree un LogoutView que distribuya una acción sobre componentWillMount :

import React from ''react'';
import {
    authenticationActionCreator
} from ''./../actionCreators'';
import {
    connect
} from ''react-redux'';
import {
    pushPath
} from ''redux-simple-router'';

let LogoutView;

LogoutView = class extends React.Component {
    componentWillMount () {
        this.props.dispatch(authenticationActionCreator.logout());
        this.props.dispatch(pushPath(''/''));
    }

    render () {
        return null;
    }
};

export default connect()(LogoutView);

La devolución de llamada componentWillMount distribuye dos acciones:

• Para destruir la sesión del usuario.
• Para redirigir al usuario a IndexRoute .

this.props.dispatch(authenticationActionCreator.logout());
this.props.dispatch(pushPath(''/''));

Answer 2

Aquí hay una implementación más actual para dicha página de /logout :

import { Component, PropTypes } from ''react''
import { connect } from ''react-redux''
import { withRouter } from ''react-router''
import * as authActionCreators from ''../actions/auth''

class LogoutPage extends Component {

  componentWillMount() {
    this.props.dispatch(authActionCreators.logout())
    this.props.router.replace(''/'')
  }

  render() {
    return null
  }
}
LogoutPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  router: PropTypes.object.isRequired
}

export default withRouter(connect()(LogoutPage))

Answer 3

Aquí está la implementación más reciente para la página de /logout :

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";

import * as authActionCreators from "../actions/auth";

class LogoutPage extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired
  };

  componentWillMount() {
    this.props.dispatch(authActionCreators.logout());
  }

  render() {
    return (
      <Redirect to="/" />
    );
  }

}

export default connect()(LogoutPage);

Trabaja para:

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"prop-types": "^15.5.10",