React redux 无法从反应组件将发布数据发送到 mapStateToProps答案

【问题标题】：React redux not able send post data to mapStateToProps from react componentReact redux 无法从反应组件将发布数据发送到 mapStateToProps
【发布时间】：2020-08-01 13:09:53
【问题描述】：

我是 react 和 redux 的新手。我正在尝试使用 react-redux、react-thunk 和 axios 发出发布请求。

这是场景 - 我在我的 react-native 应用程序中登录了 Gmail。如果用户是新用户，我正在尝试将用户保存在数据库中。我已经为此设置了 redux，但我无法将发布数据发送到 mapDispatchToProps。问题是我在 Gmail 组件中有数据，但无法在 mapDispatchToProps 中使用该数据。

如何使用mapDispatchToProps中的这个帖子数据？

提前谢谢你

这里是代码

userActions.ts

import axios from 'axios'
import { ADD_USER, GET_USER, INITIATE_REQUEST, REQUEST_FAILURE, User , UserActionTypes } from '../types/userTypes'

export const addUser = (user : User) : UserActionTypes => {
    return {
        type: ADD_USER,
        payload : user
    }
}

export const postUser = (user : User) => {
    return(dispatch : any ) => {

        dispatch(initiateRequest)
        axios.post(`${URL}users`, user ).then(data => {
            console.log(data.data)
            dispatch(getUser(data.data))

        }).catch(err => {
            console.log(err)
            dispatch(failure(err))
        })
    }
}

userReducer.ts

const userReducer = (state = initialState, action : UserActionTypes) => {
    switch(action.type){
        case ADD_USER : {
            return {
                ...state,
                loading : false,
                users : action.payload,
                error : ''
            }
        }

        default : return state
    }

}

GmailComponet.ts

const GmailLogin : React.FC<props> = ({userData, fetch, post}) => {

   const signIn = async () => {          
                // other gmail login code
                if(user) {  
                   console.log("new user")
                    // add to database
                    let data = {
                        name : String(user.displayName),
                        email : String(user.email),
                        photo : String(user.photoURL),
                        uid : String(user.uid)
                    }
                    console.log(data)
                    post(data)
                }
            }
        };
       
    const mapStateToProps = (state : any ) => {
        return {
            userData : state.user
        }
    }
    
    const mapDispatchToProps = (dispatch : any) => {
        return {
            fetch: () => dispatch(getUsers()),
            post : () => dispatch(postUser()) // error here
        }
    }
    
    export default connect
    (mapStateToProps, mapDispatchToProps)
     (GmailLogin)

【问题讨论】：

标签： reactjs react-native redux react-redux axios

【解决方案1】：

我已经解决了这个问题。调度动作基本上是我们在 userActions.ts 文件中的动作。所以基本上这个动作接受一个我们可以用来发布数据的参数

const mapDispatchToProps = (dispatch : any) => {
    return {
        fetch: () => dispatch(getUsers()),
        postUser : (user : User) => dispatch(postUser(user)) 
    }
}

【讨论】：