在redux中反映Native Store值

Question

我想将电子邮件存储在redux商店中，我无法这样做，这是我的登录组件和redux商店任何帮助将不胜感激我正在使用react-navigation

我的调度方法是在初始加载以及电子邮件输入的每个键击上调用的，我希望仅在按下“继续”按钮时调用

我需要一种方法将电子邮件存储在商店中，稍后在其他屏幕中检索它

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

您在每个渲染上调用this.props.onSingUp方法 尝试用handler方法包装调用：

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

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

Answer 2

问题是我试图以错误的方式访问商店我正在尝试使用它

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

const Email = state.email;

然而，正确的方式，可能是访问商店的唯一方法是使用mapStateToProps

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

Answer 3

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