How to handle logout route in Redux?

react-router redux react-router-redux
Gajus picture Gajus · Jan 11, 2016 · Viewed 31.4k times · Source

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

Diego V picture Diego V · Jul 8, 2016

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

Related questions

How to sync Redux state and url hash tag params

We have a list of lectures and chapters where the user can select and deselect them. The two lists are stored in a redux store. Now we want to keep a representation of selected lecture slugs and chapter slugs in …

Read More
How to sync Redux state and url query params

I have a web page with a search panel. Search panel has several input fields: id, size, ... What I want is when user set search values (for example: id=123 and size=45) and press a search button: searchState in Redux reducer …

Read More
Change default color of Link from blue to white

I am using Link component from react-router-link which applies blue color css to the text just like an anchor tag does. I want to change this to white, how can I do that? onHover I want to change it to …

Read More