Redux-Thunk 中的调度答案

【问题标题】：Dispatch in Redux-ThunkRedux-Thunk 中的调度
【发布时间】：2021-02-12 13:37:23
【问题描述】：

未捕获（承诺中）错误：请求失败，状态码为 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))
  }
}

【问题讨论】：

标签： javascript reactjs redux-thunk

【解决方案1】：

// 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
    })
  }
}

【讨论】：