Question

我是新来的人，要做出反应并做些还原。我正在尝试使用react-redux，react-thunk和axios发出发布请求。

这是场景-我的本机应用程序中有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)

Answer 1

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

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

React Redux无法从React组件发送发布数据到mapStateToProps

1 个答案: