web-dev-qa-db-ja.com

Reduxでログアウトルートを処理する方法

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

react-routerreduxreact-router-redux
11
Gajus

そのような/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))
10
Diego V

ルートを定義/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('/'));
9
Gajus

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

対象：

"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",
5
Black-Xstar