react-router - Reduxでログアウトルートを処理するには?

Question

ユーザーをログアウトする (ユーザーをログアウトするアクションをディスパッチする) ために使用できる URL を定義したいと考えています。イベントをディスパッチするルートを実装する方法を示す例は見つかりませんでした。

Answer 1

/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 2

ルートを定義します/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>;

LogoutViewに対してアクションをディスパッチする を作成します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);

componentWillMountコールバックは 2 つのアクションをディスパッチします。

• ユーザー セッションを破棄します。
• ユーザーを にリダイレクトするには、IndexRoute.

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