React-Redux: this.props.AppendCharacter n'est pas une fonction

Question

J'ai cherché des réponses à celui-ci mais je n'ai vu aucun correspondant à mon problème. Je suis en train de construire une application calculatrice en utilisant React & Redux et chaque fois que je clique sur l'un des boutons numériques, j'obtiens une erreur qui dit "this.props.AppendCharacter n'est pas une fonction"

Voici mon code pertinent:

number_button.js

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 

import AnswerScreen from '../containers/answer_screen'; 
import AppendCharacter from '../actions/index'; 

class NumberButton extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { button: '' }; 
     this.clickButton = this.clickButton.bind(this); 
    }; 

    clickButton() { 
     this.props.AppendCharacter(this.props.number); 
     console.log('clicked on ', this.props.number); 
     this.setState({ button: this.props.number }); 
    } 

    render(props) { 
     return (
      <div className="number-button general-button" onClick={this.clickButton}> 
      {this.props.number} 
      </div> 
     ); 
    }; 
}; 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ AppendCharacter }, dispatch); 
}; 

export default connect(null, mapDispatchToProps)(NumberButton); 

actions/index.js

export function AppendCharacter(character) { 
    return { 
     type: APPEND, 
     payload: character 
    }; 
}; 

Answer 1

vous pouvez accomplir ce que vous avez besoin en changeant votre mapDispatchToProps à:

function mapDispatchToProps(dispatch) { 
    return { 
     AppendCharacter: (character) => dispatch(AppendCharacter(character)); 
    }; 
} 

Je ne suis pas familier avec bindActionCreators, si quelqu'un d'autre peut avoir besoin de peser si vous avez besoin de cette fonctionnalité.

---

Side note: il ne semble pas que vous avez besoin de l'état d'un composant pour button dans votre configuration actuelle. Vous pouvez avoir des plans pour cela, mais ce n'est pas utilisé dans votre exemple.

Answer 2

const mapDispatchToProps = { 
    AnswerScreen, 
    AppendCharacter 
}; 

export default connect(null, mapDispatchToProps)(NumberButton); 

Answer 3

Eh bien, j'ai trouvé l'erreur. Quelqu'un sur un site web différent m'a aidé. Le bindActionCreators fonctionnait bien, mais le problème était que lorsque j'importe AppendCharacter de ../actions/index, j'avais besoin d'envelopper AppendCharacter dans les accolades. J'ai changé cela et maintenant l'application fonctionne.

Ouf!

Merci à tous pour vos réponses. J'ai beaucoup appris ces derniers jours!