gpt4 book ai didi

javascript - react /归零 : redirect after loggin

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:40:13 28 4
gpt4 key购买 nike

我是 React/redux 的新手。我有一个用于身份验证的 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 == "abcd@gmail.com" && json.password == "1234")
return state.set("status", true)
}

export default loginReducer;

我想在成功登录后重定向/home。我该如何重定向?

最佳答案

嗯,你要做的就是这样的事情。将回调传递给您的操作。一旦操作完成,它就会工作,只需调用该回调,它将以编程方式将您重定向到您需要的 url。提交登录表单后,将带有回调函数的输入值传递给您的操作,就像这样。

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

然后在您的操作中,如果您正在调用后端 API,当 promise 被解析时,确保您调用像这样传递给操作的回调函数。

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

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

这就是您要做的全部。您可以根据您的场景和设置对此进行细微改动。我会把它留给你作为练习。希望这可以帮助。快乐编码!

关于javascript - react /归零 : redirect after loggin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45012318/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com