Hallo @jaredpalmer , habe mit deinem Starter-Projekt angefangen an einem Projekt zu arbeiten. Gute Arbeit!
Ich habe eine Frage zum Senden von Redux-Aktionen bei Benutzerinteraktionen (z. B. Schaltflächenklick). Meine Fragen beziehen sich mehr auf die richtige Syntax. In der Vergangenheit habe ich den Konstruktor und die Bind-Funktion so aufgerufen:
function mapDispatchToProps(dispatch) {
return bindActionCreators({
importedAction,
}, dispatch);
}
class Calendar extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(programId) {
this.props.importedAction()
.then((response) => {
do something with response
});
}
}
....
render() {
return (
<a onClick={this.handleClick}>Click me to dispatch action</a>
)
}
Ich denke, Sie haben ein babel-Plugin installiert, mit dem Sie vermeiden können, ständig die "extends React.Component" zu schreiben. Ich kann 'bindActionCreators' auch nicht sehen.
Frage, wie würde ich oben schreiben, wie es in Ihrem Starterprojekt verwendet werden könnte?
function mapDispatchToProps(dispatch) {
return bindActionCreators({
importedAction,
}, dispatch);
}
class Calendar extends React.Component {
handleClick(programId) {
this.props.importedAction()
.then((response) => {
do something with response
});
}
}
....
render() {
return (
<a onClick={(evt) => this.handleClick()}>Click me to dispatch action</a>
)
}
Anscheinend verwenden Sie nicht connect
von react-redux
:
importiere {connect} aus 'react-redux'
... Ihr Bauteil ...
export default connect(mapStateToProps, actionCreators)(Calendar)
Ich schließe dies, weil es nicht mit der Boilerplate zusammenhängt. Ich schlage jedoch vor, Dan Abramovs Kurse zu Redux anzusehen:
Sehen Sie sich auch die react-redux
-API für connect
an: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options
Hilfreichster Kommentar
Anscheinend verwenden Sie nicht
connect
vonreact-redux
:importiere {connect} aus 'react-redux'
... Ihr Bauteil ...
export default connect(mapStateToProps, actionCreators)(Calendar)