Redux mapDispatchToProps 作为对象参数不起作用也没有在开发工具中显示任何预期状态

Question

大家好，我看到了其他类似的问题，但我仍然无法解决我的答案。我试图通过调用 api 来验证用户身份，并使用 thunk 作为中间件在我的 MapDispatchToProp 中传递函数，但我无法弄清楚问题出在哪里。我可以确保 api 部分正常工作。只有 前两个文件 对这个问题很重要，其余的都是我粘贴的，以获取您需要的任何额外信息。此外，我可以从我的 api 中成功获取 token，这意味着表单数据也已正确提交。

请也看看最后一个文件我是否正确连接了 thunk 我对此有疑问，尽管我从他们的文档中复制了代码

问题：authUser 未返回调度操作

假设：每次用户提供正确的电子邮件和密码时，SET_CURRENT_USER 应该被调用为操作

Process：在作为容器组件的主组件中调用了 authUser 函数，它应该将 SET_CURRENT_USER 作为操作分派，但 authUser 没有改变任何东西。

action/auth.js 文件（处理身份验证并应发送操作的文件）

// this will handle auth action
import apiCall from '../../services/api'
import {SET_CURRENT_USER} from '../actionTypes'


function authUser(data){

       let response= new Promise(async(resolve,reject)=>{
                    try{
                            let responseData=await apiCall("post","/api/auth/logIn",data)

                            resolve(responseData)
                         }catch(err){
                            reject(err)
                    }
        })
       let responseAnswer= response.then((data)=>{
            return ({type:SET_CURRENT_USER,user:data})
        }).catch((err)=>{
            /// ignore error part for now
            console.log(err.message)
        })

        // return of response part is dispatched
        return dispatch(responseAnswer) ;




}

export default authUser;

Main.js 调用用户授权功能的文件（它使用组件获取数据）

// this file is responsible for handling routes logic 
import React from 'react'
import {connect} from 'react-redux'
import {Switch , Redirect ,withRouter, Route} from 'react-router-dom'
import Home from '../components/Home'
import Auth from '../components/Auth'
import authUser from '../stores/action/auth'
function Main(props){
    console.log(props.state)
    return(
        <Switch>
            <Route exact path="/">
                 <Home />
            </Route>
            <Route exact path="/signUp">
                 <Auth heading={"Welcome to warbler"} signUp buttonText="Sign Up" />
            </Route> 
            <Route exact path="/login">
                 <Auth authUser={authUser} heading={"Welcome Back :)"} buttonText="Log In" />
            </Route>
        </Switch>
    )
}
function mapStateToProps(state){
    return (
        {
           state:state
        }
    )
}


export default withRouter(connect(mapStateToProps,{authUser})(Main))

Answer 1

终于找到我犯的错误了。这些东西只是我以前做的 Whosebug 问题的组合 combined.I 浪费了我一整天的时间。所以我想我会告诉别人不要再做这些了。此外，none 其中是新错误，它们只是组合错误。

第一个错误 --> 我做的是我假设 action creators with thunk 作为中间件 就像任何其他将 return 调度的函数一样，但我是错误.

  // return of response part is dispatched
    return dispatch(responseAnswer) ;

What i learnt is that action creators with thunk return functions with dispatch as there arguments.

正确的方法是 -->

 // i have to return a function 

//not directly return dispatch(with something) 
function authUser(data){
   // now it will be correct since its returning a func 
//with dispactch as argument
    return (dispatch)=>{
        let response=new Promise(async(resolve,reject)=>{
            try{
                let fetchedData=await (apiCall("post","/api/auth/logIn",data))
                console.log(fetchedData.data)
                resolve(fetchedData.data)
            }catch(err){
                reject(err)
            }
        })


        response.then((data,x)=>{

            dispatch({type:SET_CURRENT_USER,user:data})

        }).catch((err)=>err)


    }

}

这些 returned 函数使用 dispatch 参数来调度 actions.I 混淆了我们 return dispatch with arguments as (action to be called) 但是实际上--->

我们将分派作为参数传递给函数，return 该函数。在此函数中，每当我们的异步请求完成以更改状态时，我们都会调用 dispatch。

第二个错误 ---> 我假设 .then 的回调可用于 return 数据，例如 ..

var x = promisefunc.then((data)=>(data))

我认为这会 return 数据，但在 Whosebug 中也多次被告知，这些类型的语句将 x 值作为承诺赋值，而不是 return 数据。

第三个错误---> 当我们声明如下语句并传递 actionCreators 时，我很困惑如何将 dispatch 作为参数传递。

connect(mapStateToProps,{authUser})(Main)

但后来我阅读了 redux 文档并发现了这个 --->

**// Thunk middleware knows how to handle functions.
  // It passes the dispatch method as an argument to the function,
  // thus making it able to dispatch actions itself.**

然后我发现实际上我们只传递 redux 普通对象 thunk 所做的是每当我们传递一个 reduxActionCreator 作为函数时它由 thunk 处理然后 thunk 帮助从该函数内部调度动作。

我理解的概念可能有误，如果您认为我在某个地方弄错了，请纠正我。

Redux mapDispatchToProps 作为对象参数不起作用也没有在开发工具中显示任何预期状态

Redux mapDispatchToProps as object argument not working also not showing anything expect state in dev tool

javascript

reactjs

redux

redux-thunk

thunk