Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/417.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Redux Thunk中间件不工作_Javascript_Reactjs_Redux_Redux Thunk - Fatal编程技术网

Javascript Redux Thunk中间件不工作

Javascript Redux Thunk中间件不工作,javascript,reactjs,redux,redux-thunk,Javascript,Reactjs,Redux,Redux Thunk,我正在使用Redux实现一个基本登录。创建店铺时,我做了以下工作: const store = createStore( reducers, applyMiddleware(thunk) ); 然后,在我的操作中,我映射到用于登录的处理程序的道具 const mapDispatchToProps = (dispatch, ownProps) => { return { loginRoute: (username,password) => {

我正在使用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中间件,逻辑似乎是正确的

您需要从动作创建者返回一个函数:

export function loginRoute(username, password) {
    return function(dispatch, getState) {
        axios({...}).then((response) => {
            ...
            dispatch({type: 'LOGIN', data: response})
        }
    }
}
您可以对此使用速记语法:

export const loginRoute = (username, password) => (dispatch, getState) => {
    ...
}

或者,您也可以使用另一个中间件,它应该可以完全像上面那样实现,

您需要从操作创建者返回一个函数:

export function loginRoute(username, password) {
    return function(dispatch, getState) {
        axios({...}).then((response) => {
            ...
            dispatch({type: 'LOGIN', data: response})
        }
    }
}
您可以对此使用速记语法:

export const loginRoute = (username, password) => (dispatch, getState) => {
    ...
}

或者,您可以使用另一个中间件,它应该可以完全像上面所做的那样实现,

尝试用reducer state is matching检查登录路由的响应,用reducer state is matching检查登录路由的响应。我知道它与您的输入一起工作,但我想知道这是否是实现这种逻辑的最佳方式。非常感谢。有趣的我知道它与您的输入一起工作,但我想知道这是否是实现这种逻辑的最佳方式。非常感谢。