2
votes

Comment utiliser mapDispatchToProps

J'apprends Redux React. Comment utiliser mapDispatchToProps? Mon code est comme ci-dessous

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getAddress } from '../store/actions/addressActions';

class Dashboard extends Component {
    componentDidMount = () => {
        this.props.getAddress();
    };

    render() {
        return <div>Hello { console.log(this.props) } </div>;
    }
}

const mapStateToProps = state => ({
    address: state.address
});

const mapDispatchToProps = dispatch => ({
    getAddress
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Dashboard);

Je reçois une sortie console comme ci-dessous

Où Je fais une erreur? Comment utiliser correctement mapDispatchToProps?

react-redux redux redux-thunk

2 commentaires

Il est difficile de raisonner ce que fait l'action getAddress sans voir le code. Doit-il obtenir une adresse et la mettre en état? Le problème peut être là.

Merci @ dev-null pour votre réponse. Voici le addressAction. importer Axios depuis 'axios'; export const getAddress = () => dispatch => {return Axios.get ('/ api / address') .then (response => {dispatch ({type: 'getAddresses', payload: response.data});}) .catch (fonction (erreur) {console.log (erreur);}); } export par défaut {getAddress};

3 Réponses :

1
votes

Soit vous définissez mapDispatchToProps comme un objet , soit vous renvoyez la fonction distribuée depuis mapDispatchToProps au lieu d'un objet

En abordant d'abord votre mapStateToProps ressemblera à

const mapStateToProps = state => ({ address: state.addressReducer.address });

En utilisant la deuxième approche, cela ressemblerait à

const mapDispatchToProps = dispatch => ({
    getAddress: (...args) => dispatch(getAddress(...args));
});

Aussi puisque vous utilisez combineReducers vous devez changer la façon dont vous accédez à l'état dans mapStateToProps

const mapDispatchToProps = {
    getAddress
};

13 commentaires

Merci @Shubham Khatri pour votre solution. Mais votre solution ne fonctionne pas.

Puisque vous appelez le créateur d'action dans componentDidMount, l'adresse sera initialement indéfinie, mais plus tard devrait vous renvoyer la valeur correcte que vous accédez correctement à l'état. Utilisez-vous combineReducers dans votre code. Aussi à quoi ressemble le réducteur qui met à jour l'adresse

Oui, j'utilise combineReducers comme celui-ci const rootReducer = combineReducers ({authReducer, addressReducer}); . Quelle est la solution ?

Votre mapStateToProps doit être const mapStateToProps = state => ({address: state.addressReducer.address}); . puis en plus du changement ci-dessus dans mapDispatchToProps

Merci @Shubham Khatri. Votre solution fonctionne. Mais j'en ai deux fois plus. i.stack.imgur.com/CuC46.png .

@abuabu Comme je l'ai dit plus tôt, puisque vous distribuez une action dans componentDidMount, pour le premier rendu, l'adresse contiendra la valeur initiale dans reducer et une fois les données mises à jour, la valeur mise à jour sera visible

Merci @Shubham Khatri, que dois-je faire pour obtenir des données une fois?

Dans la méthode de rendu, return null est que le champ d’adresses n’est pas du type spécifié

Merci @Shubham Khatri. Pouvez-vous expliquer un peu plus? Mon rendu est comme ci-dessous render () {return

Hello {console.log (this.props)}

; } .

Vous écririez render () {if (Object.keys (this.props.address) === 0) {return null} return

Hello {console.log (this.props)}

; }

Merci @Shubham Khatri. Est-ce le seul moyen d'éviter les doubles données? En fait, je redirige l'utilisateur vers le tableau de bord après la connexion. À cet égard, est-il possible d'appeler cette action après la connexion pour éviter les doubles données?

Je dirais que l'obtention de données deux fois n'est pas un problème et est parfaitement un scénario normal

Merci @Shubham Khatri. Hahaha. J'obtiens toujours le double de données en utilisant votre code. Merci.

1
votes

Je pense qu'au départ, dans store , l ' adresse est indéfinie . correct? et l'action getAddress définira la valeur de l'adresse.

Voici ce que vous avez manqué, 1) vous avez expédié l'action. vous pouvez utiliser l'un des éléments suivants:

import { bindActionCreators } from "redux";

    const mapDispatchToProps = dispatch => bindActionCreators({getAddress}, dispatch)

const mapDispatchToProps = dispatch => ({
    getAddress: (...args) => dispatch(getAddress(...args));
});

1 commentaires

Merci @Harish pour votre solution. Mais votre solution ne fonctionne pas.

0
votes

Vous devriez mettre à jour un peu la méthode mapDispatchToProps . De plus, vous devez l'exporter vers le test d'écriture.

import { bindActionCreators } from 'redux';

export const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    getAddress,
    dispatch,
  ),
})

1 commentaires

Merci @Vu Luu pour votre solution. Mais votre solution ne fonctionne pas.