React Redux Connect API injiziert keine Versandeigenschaft

Question

Ich benutze react-redux, um React mit Redux-Speicher zu verbinden, und benutze "connect" API, um "dispatch" -Eigenschaft in die Komponente zu injizieren. Die Komponente erhält jedoch nicht die Eigenschaft "dispatch". Hier ist der Code, um das Problem zu demonstrieren, ich begegne:

"use strict" 

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Redux = require('redux'); 
var ReactRedux = require('react-redux'); 
var Provider = ReactRedux.Provider; 

function menuManager(state = {count: 0}, action) { 
    switch (action.type) { 
    case 'ADD': 
     return state + 1; 
    case 'REMOVE': 
     return state - 1; 
    default: 
     return state; 
    } 
} 

let store = Redux.createStore(menuManager); 

let TestLab = React.createClass({ 
    onRemove: function(itemRemove) { 
    // this.props.dispatch undefined. 
    this.props.dispatch({type: 'REMOVE'}); 
    }, 
    onAdd: function() { 
    const { dispatch } = this.props 
    // this.props.dispatch undefined. 
    this.props.dispatch({type: 'ADD'}); 
    }, 
    getInitialState: function() { 
    return { count: 0 }; 
    }, 
    render: function() { 
    return (
     <div> 
      <p>Total count: { this.state.count }</p> 
      <button type="button" onClick={this.onAdd}>Add Item</button> 
     </div> 
    ); 
    } 
}); 

function select(state) { 
    return state; 
} 

ReactRedux.connect(select)(TestLab); 

var target = document.createElement('div'); 
document.body.appendChild(target); 
ReactDOM.render(<Provider store={store}><TestLab /></Provider>, target); 

Wenn ich versuche, „this.props.dispatch“ zu nennen, erhalte ich eine Fehlermeldung, dass „this.props.dispatch“ ist nicht definiert.

Answer 1

Sie verwenden nicht die angeschlossene Komponente connect()returns a new component.

TestLab = ReactRedux.connect(select)(TestLab); 
ReactDOM.render(<Provider store={store}><TestLab /></Provider>, target); 

Sie werden laufen wie auch zu einigen anderen Themen in, nämlich Sie verwenden this.state.count statt this.props.count und Ihre Minderer Funktion versucht, auf ein Objekt zu erhöhen oder verringern nicht die ganze Zahl im Inneren.