Redux mapDispatchToProps в качестве аргумента объекта не работает и ничего не показывает ожидаемое состояние в инструменте разработки

Question

Привет всем, я видел другие подобные вопросы, но я все еще не могу решить свой ответ. Я пытаюсь аутентифицировать пользователя, вызывая API и используя Thunk в качестве промежуточного программного обеспечения для передачи функции в моем MapDispatchToProp , но я не могу понять, в чем проблема. Я могу убедиться, что API-часть работает правильно. Только первые два файла важны для этого вопроса, оставьте все, что я вставил для любой дополнительной информации, которую вы запрашиваете. Кроме того, я могу успешно получить токен из моего API, что означает, что данные формы также отправляются правильно.

Пожалуйста, также посмотрите на последний файл , правильно ли я подключил Thunk или я не сомневаюсь в этом, хотя я скопировал код из их документов

ПРОБЛЕМА : authUser не возвращает действие отправки

Предположение : каждый раз, когда пользователь вводит правильный адрес электронной почты и пароль и SET_CURRENT_USER должен вызываться как действие

Процесс : функция authUser вызывается в компоненте Main, который является контейнером компонента, и он должен отправить 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;

Основной. 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

Наконец-то нашел ошибки, которые я сделал. Эти вещи были просто комбинациями предыдущих вопросов stackOverflow, которые я делал вместе. Я потратил на это целый день. Я подумал, что скажу, чтобы другие больше не делали этого. Кроме того, ни одна из этих новых ошибок не является просто объединенными.

1-я ошибка -> я сделал то, что предположил, что создатели действий с промежуточным программным обеспечением thunk похожи на любые другие функции, которые вернет диспетчеризацию, но я был неправильный .

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

Я узнал, что создатели действий с thunk возвращают функции с диспетчеризацией в качестве аргументов.

правильный путь будет ->

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


    }

}

Эти возвращаемые функции используют аргумент dispatch для отправки действий. Я был озадачен тем, что мы возвращаем dispatch с аргументами as (action to быть вызванным) , но в действительности --->

мы передаем диспетчеризацию в качестве аргумента в функцию и возвращаем эту функцию. Внутри этой функции мы вызываем dispatch всякий раз, когда наши асин c запросы завершаются для изменения состояния.

2nd Error ---> Я предполагал, что обратные вызовы .then могут использоваться для возврата данных, таких как ..

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

я думал, что это вернет данные, но много раз было сказано в stackOverflow, что операторы этого типа присваивают значение x в качестве обещания и не возвращают данные.

3-я ошибка- -> Я был озадачен тем, как диспетчеризация передается в качестве аргумента всякий раз, когда мы объявляем операторы, подобные приведенным ниже, и передаем actionCreators.

connect(mapStateToProps,{authUser})(Main)

, но потом я прочитал в документах Redx и нашел это --->

**// 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.**

Тогда я понял, что на самом деле мы передаем примитиву только обычные объекты, что делает thunk, всякий раз, когда мы передаем reduxActionCreator как функцию, которую обрабатывает thunk, а затем thunk помогает отправлять действие изнутри этой функции.

Я могу ошибаться в представлениях о том, что я понял, поправьте меня, если вы думаете, что я где-то ошибся.