Pass input value to store using react-redux payload and reducer - react-native

Question

I have a Text Input and I am attempting to send the value inputted to the store in my reducer, then display that value on the screen.
It appears the input value is not even making it to the store...can someone explain why I am not dispatching this correctly?
e.target.value is throwing an error of Undefined.
COMPONENT
import React, { Component,setState } from 'react';
import { StyleSheet, View, Button, Text, StatusBar, TextInput, TouchableOpacity, Image } from 'react-native';
import { connect } from 'react-redux';
class Counter extends Component {
emailHandler() {
this.props.email();
}
toggleCounterHandler() {}
render() {
return (
<View>
<View ><Text style={styles.welcometext}>{this.props.value}</Text></View>
<View>
<TextInput
style={styles.input}
onChangeText= {(e) => this.props.emailHandler(e.target.value)}
value={this.props.value}
secureTextEntry={false}
/>
</View>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
value: state.value
};
}
const mapDispatchToProps = dispatch => {
return {
email: (value) => dispatch({
type: 'email',
payLoad: value
})
//() => dispatch({type: 'email', text: this.state.text})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
REDUCER
import React from 'react';
import { createStore } from 'redux';
const counterReducer = (state = { email:'email' }, action) => {
if (action.type === 'email') {
return {
...state,
email: action.payload,
};
}
console.log(state);
return state;
};
const store = createStore(counterReducer);
export default store;

Answer 1

If you have a look at onChangeText api from the docs, it is passing the text straightaway as a param. Thus, you don't have to use e.target.value
Also second thing, I noticed that you mapDispatchToProps as email instead of emailHandler? So your redux function should be this.props.email
You don't have to create another function emailHandler to use the redux in props
you should do this:
import React, { Component,setState } from 'react';
import { StyleSheet, View, Button, Text, StatusBar, TextInput, TouchableOpacity, Image } from 'react-native';
import { connect } from 'react-redux';
class Counter extends Component {
toggleCounterHandler() {}
render() {
return (
<View>
<View ><Text style={styles.welcometext}>{this.props.value}</Text></View>
<View>
<TextInput
style={styles.input}
onChangeText= {(e) => this.props.email(e.target.value)}
value={this.props.value}
secureTextEntry={false}
/>
</View>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
value: state.value
};
}
const mapDispatchToProps = dispatch => {
return {
email: (value) => dispatch({
type: 'email',
payLoad: value
})
//() => dispatch({type: 'email', text: this.state.text})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);