如何處理Redux中的註銷路由？

我想定義一個可以用來註銷用戶的URL（發送一個可以註銷用戶的動作）。我還沒有找到示例顯示如何實現派發事件的路線。如何處理Redux中的註銷路由？

2016-01-11 Gajus

爲什麼不直接發送鏈接點擊操作？不需要註銷的特殊路由 –

從用戶的角度來看，我希望能夠使用URL訪問註銷功能。 – Gajus

我猜如果你有Redux，你正在使用單頁面應用程序，但不能使用Javascript。那麼，有什麼關於它的暴露鏈接？ –

定義路線/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回調分派兩個動作：

到dest羅伊用戶會話。
將用戶重定向到IndexRoute。

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

來源

2016-01-11 11:11:31 Gajus

我不是100％確定是否應該如何處理註銷方案。如果這不是一個規範的方法，請建議編輯或添加您的答案。 – Gajus

分離'logout'和'pushPath'動作會更好。 'pushPath'應該在'componentDidMount' –

@ just-boris這是什麼原因？ – 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))

來源

2016-07-08 18:20:10

你能解釋一下什麼使得這是一個「更新」的實現？ – Gajus

同意 - 我不會說這是一個更新的實現，而是一個使用'react-router'而不是'redux-simple-router'的替代實現。我認爲這會適合大多數使用「react-router」的用例使用幷包含最近推出的'withRouter'功能，爲什麼評論。 :-) – markyph

首先，請注意，這個實現可以使用或不使用redux-simple-router（順便說一句，前一天重命名爲react-router-redux）。如果你喜歡，你可以使用Redux風格的動作，但這不是必需的，恕我直言，它與原始路由問題並不嚴格相關。這個實現還利用了最近推出的'withRouter'高階組件使其更簡單:) –

這裏是/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);

Works的：

"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",

來源

2017-08-30 02:41:20

如何處理Redux中的註銷路由？

回答

相關問題