React redux не может отправлять данные публикации в mapStateToProps из компонента реакции - PullRequest
Новая
       147

React redux не может отправлять данные публикации в mapStateToProps из компонента реакции

0 голосов
/ 01 августа 2020

Я новичок в реакции и сокращении. Я пытаюсь сделать почтовый запрос, используя response-redux, react-thunk и ax ios.

Вот сценарий - у меня есть вход в 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
    }

}

GmailComp onet .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)

1 Ответ

0 голосов
/ 01 августа 2020

Я решил проблему. Действия отправки - это в основном наши действия в файле userActions.ts. Таким образом, в основном это действие принимает параметр, который мы можем использовать для публикации данных 

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