Undefined ist kein Objekt (Bewertung 'this.props.dispatch') in React Native

Question

Ich mache eine einfache Counter-Anwendung mit React Native und Redux. Was ich möchte ist, wenn ich Plus-Taste klicken, wird der Zähler +1.

Aber wenn ich Plus-Schaltfläche klicken, um den Fehler

undefiniert ist kein Objekt (Bewertung 'this.props.dispatch')

auftritt.

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import {Text, View, StyleSheet, TouchableOpacity} from 'react-native'; 
import {incrementCounter, decrementCounter} from '../actions'; 

class Main extends Component{ 

    incrementCounter(){ 
     this.props.dispatch(incrementCounter); 
    }; 

    decrementCounter(){ 
     this.props.dispatch(decrementCounter); 
    }; 
    render(){ 
     return(
      <View> 
       <Text>RN + Redux Simple Counter</Text> 
       <Text>{this.props.count}</Text> 
       <View> 
        <TouchableOpacity onPress={this.incrementCounter}> 
         <Text>+</Text> 
        </TouchableOpacity> 
        <TouchableOpacity onPress={this.decrementCounter}> 
         <Text>-</Text> 
        </TouchableOpacity> 
        </View> 
      </View> 
     ); 
    } 
} 

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

export default connect(
    mapStateToProps 
)(Main) 

Wie löst man es? . Vielen Dank im Voraus ...

Answer 1

Sie müssen connect Ihre Komponente vollständig reduzieren. Siehe documentation

import { connect } from 'react-redux' 

const ConnectedMain = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Main) 

export default ConnectedMain 

Abfertigung wird "indirekt" zugegriffen über mapDispatchToProps

const mapDispatchToProps = (dispatch) => { 
    return { 
    onIncrementClick:() => { 
     dispatch(incrementCounter) 
    } 
    } 
} 

nennen Dann this.props.onIncrementClick()