Javascript React Redux操作未调度,但请求成功
我试图在我的项目上实现身份验证,正如标题所说,它注册了一个用户,但并没有调度操作。我有几乎相同的操作来获取数据,它工作,分派操作。功能是:Javascript React Redux操作未调度,但请求成功,javascript,reactjs,redux,fetch,Javascript,Reactjs,Redux,Fetch,我试图在我的项目上实现身份验证,正如标题所说,它注册了一个用户,但并没有调度操作。我有几乎相同的操作来获取数据,它工作,分派操作。功能是: export const signIn = data => dispatch => { dispatch({ type: SIGN_UP }) fetch(API_URL+'/register', { method: 'POST', headers: { 'content-type': 'ap
export const signIn = data => dispatch => {
dispatch({
type: SIGN_UP
})
fetch(API_URL+'/register', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(message => dispatch({
type: SIGN_UP_SUCCESS, payload: message
}))
.catch(error => dispatch({
type: SIGN_UP_FAILED, payload: error
}))
}
减速器:
export const authReducer = (state = initialState, action) => {
switch(action.type) {
case SIGN_UP:
return {
...state,
loading: true
}
case SIGN_UP_SUCCESS:
return {
...state,
loading: false,
message: action.payload
}
case SIGN_UP_FAILED:
return {
...state,
loading: false,
error: action.payload
}
default:
return state
}
}
连接方法:
export default connect(null, { signIn })(RegisterForm);
注册表单组件代码(仅满足Stackoverflow的愿望):
import React,{Component}来自'React';
从'react redux'导入{connect};
从“语义ui反应”导入{表单、按钮、消息、字段};
从“电子邮件验证程序”导入验证程序;
从“../../actions/authActions”导入{signUp};
类RegisterForm扩展了React.Component{
建造师(道具){
超级(道具)
此.state={
数据:{
用户名:“”,
名称:“”,
电子邮件:“”,
密码:“”,
城市:'',
地址:''
},
错误:{}
}
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleChange=e=>{
这是我的国家({
…这个州,
数据:{…this.state.data[e.target.name]:e.target.value}
})
}
handleSubmit=e=>{
console.log(this.state.data)
e、 预防默认值();
const errs=this.validate(this.state.data);
这是我的国家({
错误:错误
});
if(Object.keys(this.state.errors).length==0){
this.props.signUp(this.state.data)
}
}
验证=数据=>{
常量错误={};
如果(!data.username)errors.username='需要用户名';
如果(!data.name)errors.name='name是必需的';
如果(!data.email)errors.email='需要电子邮件';
如果(!validator.validate(data.email))出现错误,则返回.email=“无效电子邮件”;
如果(!data.password)errors.password='需要密码';
如果(!data.city)errors.city='需要城市';
如果(!data.address)errors.address='需要地址'
返回错误
}
render(){
const{errors,data}=this.state
返回
用户名
{errors.username&&}
名称
{errors.name&&}
地址
{errors.address&&}
城市
{errors.city&}
电子邮件
{errors.email&&}
密码
{errors.password&&}
登记
}
}
导出默认连接(null,{signUp})(RegisterForm)代码>您的代码似乎很好,请确保您的redux devtools
正确实现
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk)) // [, rest of middlewares]
您是否在组件中使用bindActionCreators?在handleSubmit中,您只是调用了action而没有发送它您如何理解action没有发送?是否执行了成功或错误阻止?请显示您的mapDispatchToProps
编辑的帖子,在网络选项卡中,数据库中有一个请求和新用户,但在redux devtools中没有操作..要在redux devtool上可用,是否有u setup store?是的,我可以看到其他操作,在初始化时调度。。