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;

h1b9b · Accepted Answer · 2019-03-10 08:33:14Z

2

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}
  ...
}

answered Mar 10, 2019 at 8:33

h1b9b

1,0705 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1767986 Over a year ago

This did solve my problem partially I am.now able to call the dispatch method only on continue button click but it's still not updating the store

h1b9b Over a year ago

I can't help you with that, I assumed that your footer component was working but if not it's another problem

h1b9b Over a year ago

you need to share your Footer component cause with the informations I have, I don't know what's going on in it

user1767986 · Accepted Answer · 2019-03-11 06:29:07Z

0

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,
});

answered Mar 11, 2019 at 6:29

user1767986

891 gold badge3 silver badges12 bronze badges

Comments

eric.joy · Accepted Answer · 2019-03-10 08:37:29Z

-1

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

answered Mar 10, 2019 at 8:37

eric.joy

351 gold badge1 silver badge5 bronze badges

1 Comment

h1b9b Over a year ago

it's not about prevent default as it's not the same event at all but with your answer, the fact that the call is wrapped in an event handler function could fix it, but the way you should avoid creating functions in the render phase

Collectives™ on Stack Overflow

React Native Store value in redux

SignUp.js

Reducers.js

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

SignUp.js

Reducers.js

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related