How to handle logout route in Redux?

Question

I want to define a URL that could be used to logout the user (dispatch an action that would logout the user). I have not found examples showing how to implement a route dispatching an event.

Answer 1

Here is a more current implementation for such /logout page:

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 2

Define a route /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>;

Create a LogoutView that dispatches an action upon 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);

The componentWillMount callback dispatches two actions:

• To destroy user session.
• To redirect user to the IndexRoute.

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