Question

我想使用mapDispatchToProps将文本输入的值从一个屏幕传递到另一个屏幕。我大概是redux世界中的新手，我有点困惑。请对我的代码进行更正。我尝试使用文档中实现的示例，但是，我不完全了解mapDispatchToProps。
PS我试图使代码尽可能简单以便更好地理解

Screen1

      import React, { Component, Fragment } from 'react';
      import {
        View,
        Text,
        StyleSheet,
      } from 'react-native';
      import { connect } from 'react-redux';

      class Screen1 extends Component {
        static navigationOptions = {
          header: null,
        }

        constructor(props) {
          super(props);
          this.state = {
            total: 1,
          };
          this.onChangeText = this.onChangeText.bind(this);

        }

        onChangeText(number) {
          const total = parseInt(number);
          if (number.length === 0) {
            this.setState({ total: '' });
          } else {
          this.setState({ total });
          }
        }


        render() {
          return (
            <SafeAreaView style={styles.AndroidSafeArea}>
                <View style={styles.wrapper}>
                  <ScrollView
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={styles.scrollableList}
                  >

                    <InputField
                      children={"Receiver's phone no."}
                      iconType={'ios-call'}
                      placeholder={"number"}
                      keyboardType={'phone-pad'}
                      maxLength={11}
                    />
                    <InputField
                      children={"Receiver's gifts"}
                      iconType={'ios-basket'}
                      placeholder={'Gifts'}
                      keyboardType={'phone-pad'}
                      maxLength={2}
                      onChangeText={this.onChangeText}
                      value={this.state.total.toString()}
                    />

                  </ScrollView>
                </View>
            </SafeAreaView>
          );
        }
      }

      function mapDispatchToProps(dispatch) {
        return {
          total: () => {
            dispatch(this.onChangeText());
          }
        }
      }

      export default connect(mapDispatchToProps) (Screen1);

Screen2

      import React, { Component, Fragment } from 'react';
      import {
        View,
        Text,
        StyleSheet,
      } from 'react-native';
      import { connect } from 'react-redux';

      class Screen2 extends Component {
        static navigationOptions = {
          header: null,
        }

        constructor(props) {
          super(props);
          this.state = {
          };
        }


        render() {
          return (
            <SafeAreaView style={styles.AndroidSafeArea}>
                <View style={styles.wrapper}>
                  <ScrollView
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={styles.scrollableList}
                  >
                  <Text>{this.props.onChangeText}</Text>
                  </ScrollView>
                </View>
            </SafeAreaView>
          );
        }
      }

      function mapStateToProps(state) {
        return {
          total: state.onChangeText
          }
        }
      }

      export default connect(mapStateToProps) (Screen2);

Reducer.js

      import { TOTAL_GIFTS } from '../actions/types';

      const initialState = {
        total: ''
      };

      const Reducer = (state = initialState, action) => {
        switch (action.type) {
          case TOTAL_GIFTS:
            return {
              ...state,
              total: action.total
            };

          default:
            return state;

        }
      };

      export default Reducer;

Answer 1

我省去了代码中与redux无关的部分。

Screen1

class Screen1 extends React.component{
    handleChange(number){
        this.props.announceChange(number)
    }
}
//mapping dispatch to props
function mapDispatchToProps(dispatch){
    announceChange(number)
}
//action creator
function announceChange(number){
    return {type:'SOME_CONSTANT',payload:number}
}
export default connect(null,mapStateToProps)(Screen1)

减速器：

export default function reducer(state={},action){
    switch(action.type){
        case 'SOME_CONSTANT':
            return {...state,number:action.payload}
        default :
            return state;
    }
}

screen2：

class Screen2 extends React.component{
    render(){
        const {number} = this.props
        return(
            <span>{number}</span>
        )
    }
}
function mapStateToProps(state){
    return {
        number : state.reducername
    }
}
export default connect(mapStateToProps)(Screen2);

以上代码是使用redux的最小方式示例。如果您对如何设置商店一无所知，则阅读this的减速器和其他redux东西将不会花费超过10分钟的时间。

Answer 2

mapDispatchToProps ：是用于更新商店（redux）的函数/操作

mapStateToProps ：从store（redux）获取数据

在第一个屏幕上，您将使用mapDispatchToProps分派操作以更新电子邮件

第二秒钟，您将收到来自mapStateToProps的电子邮件

我为您创建了一个示例代码（请检查ANDROI / IOS） 请检查https://snack.expo.io/@mehran.khan/reduxtest

APP预览

使用mapDispatchToProps将textinput值从一个屏幕传递到另一个屏幕

2 个答案: