React Native Store value in redux

Question

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

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

I need a way to store the email in the store and retrieve it in some other screen later

SignUp.js

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) => {
        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 => ({
          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 (
          <KeyboardAvoidingView
            style={styles.container}
            behavior="padding"
            keyboardVerticalOffset={Header.HEIGHT + 20}
          >
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
              <Container>
                <Typography textType="loginLabelStyle" textLabel="Use any of your existing profiles" />
                <View style={‌{ 
                  flexDirection: 'row', 
                  justifyContent: 'space-between', 
                }}
                >
                  <SocialIcon type="twitter" />
                  <SocialIcon type="facebook" />
                  <SocialIcon type="google" light onPress={this.signIn} />
                </View>
                <Typography textType="loginLabelStyle" textLabel="or create one on SimpliFid" />

                <DefaultInput
                  placeholder="Your E-Mail Address"
                  style={styles.input}
                  value={stateData.controls.email.value}
                  onChangeText={val => this.updateInputState('email', val)}
                  valid={stateData.controls.email.valid}
                  touched={stateData.controls.email.touched}
                  autoCapitalize="none"
                  autoCorrect={false}
                  keyboardType="email-address"
                />

                <DefaultInput
                  placeholder="Password"
                  style={styles.input}
                  value={stateData.controls.password.value}
                  onChangeText={val => this.updateInputState('password', val)}
                  valid={stateData.controls.password.valid}
                  touched={stateData.controls.password.touched}
                  secureTextEntry
                />

                <DefaultInput
                  placeholder="Confirm Password"
                  style={styles.input}
                  value={stateData.controls.confirmPassword.value}
                  onChangeText={val => this.updateInputState('confirmPassword', val)}
                  valid={stateData.controls.confirmPassword.valid}
                  touched={stateData.controls.confirmPassword.touched}
                  secureTextEntry
                />
                <FooterContainer>
                  <Footer
                    leftButtonHandler={() => navigation.goBack()}
                    rightButtonHandler={this.props.onSignUp(stateData.controls.email.value, navigation)}
                    /*  rightButtonHandler={() => navigation.navigate('ChatBot')} */
                  />
                </FooterContainer>
              </Container>
            </TouchableWithoutFeedback>
          </KeyboardAvoidingView>
        );
      }
}

SignUp.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func.isRequired
  }).isRequired
};

const mapDispatchToProps = dispatch => ({
  onSignUp: (email, navigation) => {
    Alert.alert(email);
    dispatch({ type: actionTypes.SIGNUP, email });
    navigation.navigate('ChatBot');
  }
});

export default connect(
  null,
  mapDispatchToProps
)(SignUp);

Reducers.js

import * as actionTypes from './actions';

const initialState = {
  email: '',
  accountType: '',
  name: '',
  dob: '',
  address: '',
  ssn: '',
  phoneNumber: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.SIGNUP:
      return {
        ...state,
        email: action.email,
      };
    default:
      return state;
  }
};

export default reducer;

Answer 1

The problem was that i was trying to access the store in a wrong way i was trying using this

import state from '../store/reducers';

const Email = state.email;

However the correct way and probably the only way to access the store is using mapStateToProps

const mapStateToProps = state => ({
  email: state.email,
});

Answer 2

<Footer
    leftButtonHandler={() => navigation.goBack()}
    rightButtonHandler={(event) => {
            event.preventDefault();
         this.props.onSignUp(stateData.controls.email.value,navigation)
/>
Try adding the event.preventDefault() in the rightButtonHandler.

Answer 3

You are calling the this.props.onSingUp methods on each render
Try wrapping the call in a handler method:

handleRightButton = () => {
  this.props.onSignUp(this.state..controls.email.value, this.props.navigation);
}

// And on render 
render() {
  ...
  rightButtonHandler={this.handleRightButton}
  ...
}