React/Redux：登錄後重定向

剛接觸react/redux.I有Redux操作進行身份驗證，之後我需要重定向到確認頁面主頁。我不知道如何重定向React/Redux：登錄後重定向

這是我index.js

import React, { PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { FormattedMessage } from 'react-intl'; 
import { createStructuredSelector } from 'reselect'; 
import {loginAction} from './actions'; 


export class Login extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function 

constructor(props) { 
super(props); 
this.state = { 
    username: '', 
    password: '' 
}; 

// this.handleChange = this.handleChangeUsername.bind(this); 
// this.handleSubmit = this.handleChangePassword.bind(this); 
} 

handleChangeUsername(event) { 
console.log(event.target.value); 
this.setState({username: event.target.value}); 
console.log(this.state.username) 
} 
handleChangePassword(event) { 
this.setState({password: event.target.value}); 
console.log(this.state.password) 
} 

handleSubmit(event) { 

this.props.dispatch(loginAction(this.state)); 
event.preventDefault(); 
} 
render() { 
return (
    <div> 

    <div className="loginColumns animated fadeInDown"> 
    <div className="row"> 

     <div className="col-md-6"> 

     </div> 
     <div className="col-md-6"> 
      <div className="ibox-content"> 
       <form className="m-t" role="form" onSubmit={this.handleSubmit.bind(this)}> 
        <div className="form-group"> 
         <input type="email" value={this.state.username} onChange={this.handleChangeUsername.bind(this)} className="form-control" placeholder="Username" required="" /> 
        </div> 
        <div className="form-group"> 
         <input type="password" value={this.state.password} onChange={this.handleChangePassword.bind(this)} className="form-control" placeholder="Password" required="" /> 
        </div> 
        <button type="submit" className="btn btn-primary block full-width m-b">Login</button> 

        <a href="#"> 
         <small>Forgot password?</small> 
        </a> 
       </form> 
      </div> 
     </div> 
    </div> 
    <hr/> 
    <div className="row"> 
     <div className="col-md-6"> 
      Copyright Example Company 
     </div> 
     <div className="col-md-6 text-right"> 
      <small>© 2014-2015</small> 
     </div> 
    </div> 
</div> 

    </div> 
); 
} 
} 

Login.propTypes = { 
dispatch: PropTypes.func.isRequired, 
}; 

const mapStateToProps = createStructuredSelector({ 
// Login: makeSelectLogin(), 
}); 

function mapDispatchToProps(dispatch) { 
return { 
dispatch, 
}; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Login);

action.js

import { 
    DEFAULT_ACTION, 
    LOGIN_ACTION 
} from './constants'; 

export function defaultAction() { 
return { 
    type: DEFAULT_ACTION, 
    }; 
} 

export function loginAction(json) { 
    return { 
    type: LOGIN_ACTION, 
    json 
    }; 
}

reducer.js

import { fromJS } from 'immutable'; 
import { 
    DEFAULT_ACTION, 
    LOGIN_ACTION 
} from './constants'; 

const initialState = fromJS({ 
    status: false 
}); 

function loginReducer(state = initialState, action) { 
    console.log("action", action) 
    switch (action.type) { 
    case DEFAULT_ACTION: 
     return state; 

    case LOGIN_ACTION: 
     return _testFunction(state,action.json); 
     default: 
     return state; 
    } 
} 

function _testFunction(state, json) { 
    if(json.username == "[email protected]" && json.password == "1234") 
    return state.set("status", true) 
} 

export default loginReducer;

我想重定向/成功登錄後返回。我如何重定向？

來源

2017-07-10 Arun Ravindran

看看'react-router' – nrgwsth

假設你已經在使用react-router，這應該有助於https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react -router/44128108＃44128108 –

那麼，你必須做的就是這樣的事情。將回調傳遞給您的操作。一旦行動完成它的工作，只需調用該回調，它將以編程方式將您重定向到您需要的url。提交登錄表單後，將回調函數的輸入值傳遞給您的操作。

onSubmit(values) { 
    this.props.loginAction(values,() => { 
     this.props.history.push('/'); 
    }); 
    }

然後在你的行動，如果要調用後端API，當承諾解決確保你調用一個獲取到這樣的動作傳遞的回調函數。

export function loginAction(values, callback) { 
    const request = axios.post(`/endpoint`, values) 
    .then(() => callback()); 

    return { 
    type: LOGIN, 
    payload: request 
    }; 
}

這就是你所要做的。取決於您的場景和設置，您可以對此進行輕微更改。我會保留它作爲練習。希望這可以幫助。快樂編碼！

來源

2017-07-10 14:15:38

React/Redux：登錄後重定向

回答

相關問題