title: React Native Store value in redux
body: <p>i wanted to store the Email in the redux store and i am unable to do so here is my sign in component and redux store any help would be appreciated i am using react-navigation </p>
  
  <p>My Dispatch Method is invoked on the initial load as well as on every key stroke for email input i want that to invoke only on hit of continue button </p>
  
  <p>I need a way to store the email in the store and retrieve it in some other screen later </p>
  
  <h1>SignUp.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    View,
    KeyboardAvoidingView,
    Keyboard,
    TouchableWithoutFeedback,
    Alert
  } from 'react-native';
  import { SocialIcon } from 'react-native-elements';
  import PropTypes from 'prop-types';
  import { Header } from 'react-navigation';
  
  import { connect } from 'react-redux';
  import {
    Container, Footer, FooterContainer, DefaultInput, Typography
  } from '../components/common';
  import { validate } from '../config';
  
  import * as actionTypes from '../store/actions';
  
  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    input: {
      width: '80%',
      height: 40
    }
  });
  
  class SignUp extends Component {
        state = {
          controls: {
            email: {
              value: '',
              valid: false,
              validationRules: {
                isEmail: true
              },
              touched: false
            },
            password: {
              value: '',
              valid: false,
              validationRules: {
                minLength: 6
              },
              touched: false
            },
            confirmPassword: {
              value: '',
              valid: false,
              validationRules: {
                equalTo: 'password'
              },
              touched: false
            }
          }
        };
  
  
        updateInputState = (key, value) =&gt; {
          let connectedValue = {};
          const stateObject = this.state;
          if (stateObject.controls[key].validationRules.equalTo) {
            const equalControl = stateObject.controls[key].validationRules.equalTo;
            const equalValue = stateObject.controls[equalControl].value;
            connectedValue = {
              ...connectedValue,
              equalTo: equalValue
            };
          }
          if (key === 'password') {
            connectedValue = {
              ...connectedValue,
              equalTo: value
            };
          }
          this.setState(prevState =&gt; ({
            controls: {
              ...prevState.controls,
              confirmPassword: {
                ...prevState.controls.confirmPassword,
                valid:
                  key === 'password'
                    ? validate(
                      prevState.controls.confirmPassword.value,
                      prevState.controls.confirmPassword.validationRules,
                      connectedValue
                    )
                    : prevState.controls.confirmPassword.valid
              },
              [key]: {
                ...prevState.controls[key],
                value,
                valid: validate(value, prevState.controls[key].validationRules, connectedValue),
                touched: true
              }
            }
          }));
        };
  
        render () {
          const stateData = this.state;
          const { navigation } = this.props;
          return (
            &lt;KeyboardAvoidingView
              style={styles.container}
              behavior="padding"
              keyboardVerticalOffset={Header.HEIGHT + 20}
            &gt;
              &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss}&gt;
                &lt;Container&gt;
                  &lt;Typography textType="loginLabelStyle" textLabel="Use any of your existing profiles" /&gt;
                  &lt;View style={‌{ 
                    flexDirection: 'row', 
                    justifyContent: 'space-between', 
                  }}
                  &gt;
                    &lt;SocialIcon type="twitter" /&gt;
                    &lt;SocialIcon type="facebook" /&gt;
                    &lt;SocialIcon type="google" light onPress={this.signIn} /&gt;
                  &lt;/View&gt;
                  &lt;Typography textType="loginLabelStyle" textLabel="or create one on SimpliFid" /&gt;
  
                  &lt;DefaultInput
                    placeholder="Your E-Mail Address"
                    style={styles.input}
                    value={stateData.controls.email.value}
                    onChangeText={val =&gt; this.updateInputState('email', val)}
                    valid={stateData.controls.email.valid}
                    touched={stateData.controls.email.touched}
                    autoCapitalize="none"
                    autoCorrect={false}
                    keyboardType="email-address"
                  /&gt;
  
                  &lt;DefaultInput
                    placeholder="Password"
                    style={styles.input}
                    value={stateData.controls.password.value}
                    onChangeText={val =&gt; this.updateInputState('password', val)}
                    valid={stateData.controls.password.valid}
                    touched={stateData.controls.password.touched}
                    secureTextEntry
                  /&gt;
  
                  &lt;DefaultInput
                    placeholder="Confirm Password"
                    style={styles.input}
                    value={stateData.controls.confirmPassword.value}
                    onChangeText={val =&gt; this.updateInputState('confirmPassword', val)}
                    valid={stateData.controls.confirmPassword.valid}
                    touched={stateData.controls.confirmPassword.touched}
                    secureTextEntry
                  /&gt;
                  &lt;FooterContainer&gt;
                    &lt;Footer
                      leftButtonHandler={() =&gt; navigation.goBack()}
                      rightButtonHandler={this.props.onSignUp(stateData.controls.email.value, navigation)}
                      /*  rightButtonHandler={() =&gt; navigation.navigate('ChatBot')} */
                    /&gt;
                  &lt;/FooterContainer&gt;
                &lt;/Container&gt;
              &lt;/TouchableWithoutFeedback&gt;
            &lt;/KeyboardAvoidingView&gt;
          );
        }
  }
  
  SignUp.propTypes = {
    navigation: PropTypes.shape({
      navigate: PropTypes.func.isRequired
    }).isRequired
  };
  
  const mapDispatchToProps = dispatch =&gt; ({
    onSignUp: (email, navigation) =&gt; {
      Alert.alert(email);
      dispatch({ type: actionTypes.SIGNUP, email });
      navigation.navigate('ChatBot');
    }
  });
  
  export default connect(
    null,
    mapDispatchToProps
  )(SignUp);
  </code></pre>
  
  <h1>Reducers.js</h1>
  
  <pre><code>import * as actionTypes from './actions';
  
  const initialState = {
    email: '',
    accountType: '',
    name: '',
    dob: '',
    address: '',
    ssn: '',
    phoneNumber: '',
  };
  
  const reducer = (state = initialState, action) =&gt; {
    switch (action.type) {
      case actionTypes.SIGNUP:
        return {
          ...state,
          email: action.email,
        };
      default:
        return state;
    }
  };
  
  export default reducer;
  </code></pre>