Redux thunk with rendering using App class - reactjs

Question

Redux thunk with rendering using App class - I am using react-native and redux thunk to call the dispatcher via componentDidMount of App class and receiving errors "props is not defined" and "Unable to find module for EventDispatcher".
Would request for further help on this from experts.
index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import {Provider} from 'react-redux';
import configureStore from './configureStore';
import App from './App';
import {name as appName} from './app.json';
const store = configureStore();
const rnredux = () => (
<Provider store={store}>
<App />
</Provider>
)
AppRegistry.registerComponent(appName, () => rnredux);
app.js
import React from 'react';
import {Platform, TouchableHighlight, StyleSheet, Text, View} from 'react-native';
import {connect} from 'react-redux'
import {fetchPeopleFromAPI} from './actions'
class App extends React.Component {
componentDidMount() {
this.props.getPeople();
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native! & Redux</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<TouchableHighlight onPress={props.getPeople} style={styles.buttonText}>
<Text>Fetch Data</Text>
</TouchableHighlight>
{
isFetching && <Text>Loading</Text>
}
{
people.length? (
people.map((person,index) => {
return (
<View key={index}>
<Text>Name: {person.breedName}</Text>
</View>
)
})
) : null
}
</View>
);
}
}
const {people, isFetching} = props.people
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
buttonText: {
backgroundColor: 'red',
height:60,
justifyContent: 'center',
alignItems: 'center',
}
});
function mapStateToProps (state) {
return {
people: state.people
}
}
function mapDispatchToProps (dispatch) {
return {
getPeople: () => dispatch(fetchPeopleFromAPI())
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App)

Answer 1

Remove this part from your code completely:
function mapDispatchToProps (dispatch) {
return {
getPeople: () => dispatch(fetchPeopleFromAPI())
}
}
in your export statement amend into:
export default connect(
mapStateToProps,
{ fetchPeopleFromAPI }
)(App)
and finally in your componentDidMount:
componentDidMount() {
this.props.fetchPeopleFromAPI();
}