使用 react-redux 有效负载和 reducer 将输入值传递给存储

Question

我有一个文本输入，我正在尝试将输入的值发送到我的减速器中的商店，然后在屏幕上显示该值。

似乎输入值甚至没有进入商店...有人可以解释为什么我没有正确发送这个吗？

e.target.value 抛出未定义的错误。

组件

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

减速器

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

如果您查看docs 中的onChangeText api，它会直接将文本作为参数传递。因此，您不必使用e.target.value

第二件事，我注意到你mapDispatchToProps 是email 而不是emailHandler？所以你的redux函数应该是this.props.email

你不必创建另一个函数 emailHandler 来使用 props 中的 redux

你应该这样做：

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