如何使用 dispatch 将文本输入变量的状态发送到 reducer 并将其显示在另一个屏幕上？

Question

我希望我的变量状态（通过它从 textInput 中获得一个值）被发送到一个 reducer 并通过我发送的变量的状态改变那个 reducer 的状态，这样我可以使用 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

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 属性。

Answer 2

对于那些看到这个 post 并想做类似事情的人，我的意思是将 textInput 变量的状态发送到一个 reducer 并从另一个带有 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;

如何使用 dispatch 将文本输入变量的状态发送到 reducer 并将其显示在另一个屏幕上？

How to send the state of a Text Input variable to a reducer with dispatch and display it on another screen?

reducers

react-native

redux

react-redux