React redux无法将post数据从react组件发送到mapStateToProps

Question

我是一个新的反应和重复。我正在尝试使用react-redux、react-thunk和axios发出post请求。

这是一个场景--我在我的react原生应用中有了Gmail登录。如果用户是新用户，我会尝试将该用户保存在数据库中。我已经设置了redux，但是我不能将post数据发送到mapDispatchToProps。问题是我在Gmail组件中有数据，但不能在mapDispatchToProps中使用这些数据。

如何在mapDispatchToProps中使用此post数据

提前谢谢你

以下是代码

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)

Answer 1

我已经解决了这个问题。分派操作基本上是我们在userActions.ts文件中的操作。基本上，此操作接受一个参数，我们可以使用该参数来发布数据

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