派发Redux-Thunk

纳格里克

未捕获(承诺)错误:请求失败,状态码为400

我需要向数据库发出页面请求以登录到系统,但是我已经很困惑了,不知道如何删除此错误。在此之前,出现错误“操作必须是普通对象。将自定义中间件用于异步操作”。之后,我连接了Redux-Thunk,并出现了当前错误。

动作

export const auth = (email, password, isLogin) => {
  return async(dispatch) => {
    dispatch(authData())
    
    let url = 'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyAU8gNE0fGG8z9zqUyh68Inw9_RzljhCCs'

    if (isLogin) {
      url = 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyAU8gNE0fGG8z9zqUyh68Inw9_RzljhCCs'
    }
    const response = await axios.post(url, authData)
    console.log(response.data)
  }
}

const authData = (email, password, returnSecureToken = true) => ({
  type: 'LOGIN',
  email,
  password,
  returnSecureToken
})

成分

loginHandler = () => {
  this.props.auth(
    this.props.AuthMail,
    this.props.AuthPass,
    true
  )
}

registerHandler = () => {
  this.props.auth(
    this.props.AuthRegMail,
    this.props.AuthRegPass,
    false
  )
}

const mapDispatchToProps = dispatch => {
  return {
    auth: (email, password, isLogin) => dispatch(auth(email, password, isLogin))
  }
}
旁边的
// You forgot to add the arguments to authData function
dispatch(authData())
// Here you are passing in a function as the second argument
const response = await axios.post(url, authData)

应该可能是这样的:

export const auth = (email, password, isLogin) => {
  return async (dispatch) => {    
    const url = isLogin ? 'example.com/login' : 'example.com/signup';
    const response = await axios.post(url, {
      email,
      password,
      returnSecureToken: true,
    });
    console.log(response.data);
    // Handle this action somewhere to store the signed in user data in redux
    dispatch({
      type: "LOGIN",
      payload: response.data
    })
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Redux Thunk 如何实现

来自分类Dev

减少redux-thunk样板

来自分类Dev

Redux Thunk和异步操作

来自分类Dev

Redux Thunk Firebase - 获取数组

来自分类Dev

Redux Thunk 共享异步对象

来自分类Dev

Redux Thunk与Redux定制中间件

来自分类Dev

Redux Thunk Action Creator没有被调用

来自分类Dev

派遣Redux Thunk重新渲染React组件

来自分类Dev

Redux thunk-嵌套调度的函数/动作

来自分类Dev

响应redux,thunk满足事件过早发生

来自分类Dev

Redux Thunk操作,axios返回多个值

来自分类Dev

Redux Thunk的目的`[[[arg(s)])=> dispatch =>`?

来自分类Dev

Redux Thunk Action Creator没有被调用

来自分类Dev

Redux Thunk-异步,与Promises链接的动作

来自分类Dev

redux thunk 中的 AsyncStorage,动作未调度

来自分类Dev

Redux Thunk:动作必须是普通对象

来自分类Dev

Angular - Redux Thunk AppState 未定义

来自分类Dev

Redux Thunk - 是否可以取消 setTimeout

来自分类Dev

异步初始状态React-Redux Redux-Thunk

来自分类Dev

如何在Redux Toolkit的createSlice中使用Redux-Thunk?

来自分类Dev

什么时候使用redux saga和redux thunk?

来自分类Dev

分派操作后Redux Thunk回调吗?

来自分类Dev

redux thunk调度后从商店返回promise

来自分类Dev

如何在redux-thunk中使用axios / AJAX

来自分类Dev

使用redux-thunk取消先前的异步操作

来自分类Dev

如何使用Redux Thunk处理fetch()响应中的错误?

来自分类Dev

redux-thunk调度方法触发未定义的操作

来自分类Dev

ReactJS + Redux + Reduc-thunk无法调度promise

来自分类Dev

为什么要全部使用redux saga或thunk