动作必须是普通对象。使用自定义中间件进行异步操作。在添加redux thunk并将其用作中间件之后
动作必须是普通对象。使用自定义中间件进行异步操作 这是一个错误,此函数是指向的 this.props.registerUser(newUser) 请参阅下一个代码段 redux thunk用于引用普通js对象,但不起作用 这是我的操作创建者文件:动作必须是普通对象。使用自定义中间件进行异步操作。在添加redux thunk并将其用作中间件之后,redux,react-redux,redux-thunk,Redux,React Redux,Redux Thunk,动作必须是普通对象。使用自定义中间件进行异步操作 这是一个错误,此函数是指向的 this.props.registerUser(newUser) 请参阅下一个代码段 redux thunk用于引用普通js对象,但不起作用 这是我的操作创建者文件: import { GET_ERRORS } from "./types"; import axios from "axios"; // Register User export const registerUser = userData =>
import { GET_ERRORS } from "./types";
import axios from "axios";
// Register User
export const registerUser = userData => dispatch => {
axios
.post("/api/users/register", userData)
.then(res => console.log(res))
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
这是我的注册页面:
import React, { Component } from "react";
import PropTypes from "prop-types";
// import { withRouter } from 'react-router-dom';
import classnames from "classnames";
import { connect } from "react-redux";
import { registerUser } from "../../actions/authActions";
class Register extends Component {
constructor() {
super();
this.state = {
name: "",
email: "",
password: "",
password2: "",
errors: {}
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.errors) {
this.setState({ errors: nextProps.errors });
}
}
onChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
onSubmit(event) {
event.preventDefault();
const newUser = {
name: this.state.name,
email: this.state.email,
password: this.state.password,
confirm_password: this.state.password2
};
this.props.registerUser(newUser);
}
render() {
const { errors } = this.state;
return (
<div className="register">
<div className="container">
<div className="row">
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">Sign Up</h1>
<p className="lead text-center">
Create your SocioStalker account
</p>
<form noValidate onSubmit={this.onSubmit}>
<div className="form-group">
<input
type="text"
className={classnames("form-control form-control-lg", {
"is-invalid": errors.name
})}
placeholder="Name"
name="name"
value={this.state.name}
onChange={this.onChange}
/>
<div className="invalid-feedback">{errors.name}</div>
</div>
<div className="form-group">
<input
type="email"
className={classnames("form-control form-control-lg", {
"is-invalid": errors.email
})}
placeholder="Email Address"
name="email"
value={this.state.email}
onChange={this.onChange}
/>
<div className="invalid-feedback">{errors.email}</div>
<small className="form-text text-muted">
This site uses Gravatar so if you want a profile image, use
a Gravatar email
</small>
</div>
<div className="form-group">
<input
type="password"
className={classnames("form-control form-control-lg", {
"is-invalid": errors.password
})}
placeholder="Password"
name="password"
value={this.state.password}
onChange={this.onChange}
/>
<div className="invalid-feedback">{errors.password}</div>
</div>
<div className="form-group">
<input
type="password"
className={classnames("form-control form-control-lg", {
"is-invalid": errors.confirm_password
})}
placeholder="Confirm Password"
name="password2"
value={this.state.password2}
onChange={this.onChange}
/>
<div className="invalid-feedback">
{errors.confirm_password}
</div>
</div>
<input type="submit" className="btn btn-info btn-block mt-4" />
</form>
</div>
</div>
</div>
</div>
);
}
}
Register.propTypes = {
registerUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
export default connect(
mapStateToProps,
{ registerUser }
)(Register);
您的商店设置逻辑错误。你有这个:
compose(
composeWithDevTools(),
applyMiddleware(...middleware)
)
相反,它应该是:
composeWithDevTools(
applyMiddleware(...middleware)
)
有关如何正确设置中间件和DevTools扩展的示例,请参见
我也鼓励你尝试一下我们的新产品。它包括一个自动为您完成所有这一切的
下面是使用configureStore
简化启动文件的方法:
import {configureStore} from "redux-starter-kit";
import rootReducer from "./reducers";
const store = configureStore({
reducer : rootReducer,
});
在.then()中分派操作(类似于catch)。。目前它只是记录数据…为什么需要它?它会修复ISSUE吗?仍然不工作添加了一个TEST_DISPATCH动作,还添加了reducer。然后(res=>DISPATCH({type:TEST_DISPATCH}))hmmm。。您介意在导入和应用
redux thunk
的位置添加代码吗?
import {configureStore} from "redux-starter-kit";
import rootReducer from "./reducers";
const store = configureStore({
reducer : rootReducer,
});