如何通过调度将文本输入变量的状态发送到减速器并将其显示在另一个屏幕上？

Question

我希望将我的变量的状态（通过它从 textInput 中获得一个值）发送到减速器，并通过我发送的变量的状态更改该减速器的状态，这样我就可以显示使用 mapStateToProps 在不同的屏幕上显示它，我在全局范围内得到它。

有没有办法做到这一点？我研究并找到了示例，但不是我想要的方式。

我澄清我的代码只是一个示例，以便您了解我想要做什么，不要将其作为指导，因为我不知道它是否可以这样工作

我给你看我的一些代码，让你了解我是什么

 import React, { Component } from "react";
    import {
        View,
        Text,
        StyleSheet,
        TextInput,
        TouchableOpacity
    } from "react-native";

    import { connect } from 'react-redux';

    class ScreenHome extends Component {
        static navigationOptions = {
            header: null
        }
        constructor(props) {
            super(props);
            this.state = {
                Texto: '',
            }
        }

        render() {
            this.props.ChangeState({type: 'ACTION_TYPE', Texto: this.state.Texto});
            const { navigation } = this.props;
            return (
                <View style={styles.container}>
                    <TextInput
                        placeholder="Enter Text"
                        value={this.state.Texto}
                        onChangeText={Texto => this.setState({ Texto })}
                    />
                    <View style={{ marginBottom: 10, marginTop: 10, backgroundColor: 'black', padding: 10 }}>
                        <TouchableOpacity onPress={this.props.ChangeState}>
                            <Text style={{ color: 'white' }}>Send Text Input status to the reducer</Text>
                        </TouchableOpacity>
                    </View>
                    <View>
                        <TouchableOpacity style={{ backgroundColor: 'blue', padding: 10 }} onPress={() => { navigation.navigate('Other') }}>
                            <Text style={{ color: '#fff' }}>Go</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            );
        }
    }
    const mapStateToProps = (state) => {
        return {
            // prop: state.prop
        }
    }

    const mapDispatchToProps = (dispatch) => {
        return {
             ChangeState: () => {
            //     dispatch({ type: 'ACTION_TYPE', Texto: this.state.Texto });
             }
        }
    }

    export default connect(mapStateToProps, mapDispatchToProps)(ScreenHome)

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }
    });

其他屏幕：

    import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";

import { connect } from 'react-redux';

class ScreenOther extends Component {
    static navigationOptions = {
        header: null
    }
    render() {
        const { navigation } = this.props;
        return (
            <View style={styles.container}>
                <Text>{this.props.StateInitial}</Text>
                <TouchableOpacity onPress={() => { navigation.navigate('Home') }}>
                    <Text>Go back</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        StateInitial: state.reducerText
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
    //    ChangeState: () => {
    //          dispatch({type: 'CHANGE_TEXT'})
    //     }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ScreenOther)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

商店

import { createStore, combineReducers } from 'redux';

const reducerText = (state = [0], action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
        return {...state, Texto:action.Texto};

        default:
            return state;
    }
};

const Reducers = combineReducers({
    reducerText
})

const Store = createStore(Reducers)

export default Store;

Answer 1

对于那些看到这篇文章并想要做类似事情的人，我的意思是将 textInput 变量的状态发送到减速器，并使用 redux 从另一个屏幕询问状态，请随时查看我将在下面留下的代码因为我在调查，过了一段时间才知道。

这是redux-form

的代码

import React, { Component } from "react";
import {
    View,
    TextInput,
    StyleSheet,
    Button,
    Text
} from "react-native";

import { Field, reduxForm } from 'redux-form';

import { connect } from 'react-redux';

const ScreenFormHome = (props) => (
    <View>
        <Field name="Text" component={fieldNombre} ph="Enter Text" />
        <Button title="Send Dispatch" onPress={props.handleSubmit((values) => props.SendDispatch(values))} />
    </View>
);

const fieldNombre = (props) => (

    <View style={styles.textInput}>
        <TextInput
            placeholder={props.ph}
            onChangeText={props.input.onChange}
            value={props.input.value}
            autoCapitalize="none"
            onBlur={props.input.onBlur}
        />
        <View style={styles.linea} />
    </View>

);

const styles = StyleSheet.create({
    textInput: {
        marginBottom: 16,
    },
    linea: {
        backgroundColor: '#DCDCDC',
        height: 2,
    },
});

const mapDispatchToProps = (dispatch) => {
    return {
        SendDispatch: (values) => {
            dispatch({ type: 'ACTION_TYPE', Text: values.Text })
        }
    }
}
const mapStateToProps = (state) => {
    return {
        //  StateInitial: state.reducerText
    }
}

export default reduxForm({
    form: 'ScreenFormHome',
})(connect(mapStateToProps, mapDispatchToProps)(ScreenFormHome));

这是组件代码

 import React, { Component } from "react";
    import {
        View,
        Text,
        StyleSheet,
        TouchableOpacity
    } from "react-native";

    import ScreenFormHome from "./ScreenFormHome";

    class ScreenHome extends Component {

        static navigationOptions = {
            header: null
        }

        render() {
            const { navigation } = this.props;
            return (
                <View style={styles.container}>
                    <TouchableOpacity style={{ backgroundColor: 'blue', padding: 10, marginBottom: 10 }} onPress={() => { navigation.navigate('Other') }}>
                        <Text style={{ color: '#fff' }}>Go</Text>
                    </TouchableOpacity>
                    <ScreenFormHome />
                </View>
            );
        }
    }

    export default ScreenHome;

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }
    });

这是商店代码

import { createStore, combineReducers } from 'redux';

import { reducer as form } from 'redux-form'

const reducerText = (state = [], action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
            return (action.Text)
        default:
            return state;
    }
};


const Reducers = combineReducers({
    reducerText,
    form
})

const Store = createStore(Reducers)

export default Store;

Answer 2

dispatch1 应该在主屏幕的道具中可见。所以如果你这样做

this.props.dispatch1({type: 'YOUR_ACTION_TYPE', Text: this.state.Text});

你的 reducer 函数将在你可以做的地方被调用：

reducer: (state, action) => {
     switch (action.type) {
       case 'YOUR_ACTION_TYPE':
        return {...state, Text:action.Text};
     }
  }

然后在另一个屏幕中，您应该会看到更改后的 Text 属性。