我正在使用Redux实现基本登录。当我创建我的商店时,我做了以下事情:
const store = createStore(
reducers,
applyMiddleware(thunk)
);
然后在我的行动中,我映射到了登录处理程序的道具......
const mapDispatchToProps = (dispatch, ownProps) => {
return {
loginRoute: (username,password) => {
dispatch(loginRoute(username,password));
},
dispatch
}
};
然后在提交时发送操作......
this.props.loginRoute(username.value,password.value);
登录路线功能看起来像这样......
export function loginRoute(username, password){
return axios({
method: 'post',
url: '/login',
data: {
'username': username,
'password': password
}
}).then((response)=>{
if(response.data === "no username in database"){
// send action to update state, no username in database
return{
type: "ERROR",
response
};
}else if(response.data ==="incorrect password"){
return{
type: "ERROR",
response
};
}else{
return{
type: 'LOGIN',
data:response
};
}
}).catch((error)=>{
return{
type: "ERROR",
response: error
};
});
}
但是,所有这些我得到错误操作必须是普通对象。使用自定义中间件进行异步操作。
为什么有任何想法?我正在使用thunk中间件,逻辑似乎是正确的。
答案 0 :(得分:3)
您需要从动作创建者返回一个功能:
Clustering done on Mar 30, 2017 11:13 AM
您可以使用简写语法:
export function loginRoute(username, password) {
return function(dispatch, getState) {
axios({...}).then((response) => {
...
dispatch({type: 'LOGIN', data: response})
}
}
}
或者,您可以使用另一个中间件,这样就可以像上面那样完全实现https://github.com/acdlite/redux-promise