Как отправить состояние переменной ввода текста в редуктор с диспетчеризацией и отобразить его на другом экране?

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-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: (state, action) => {
     switch (action.type) {
       case 'YOUR_ACTION_TYPE':
        return {...state, Text:action.Text};
     }
  }

Затем на другом экране вы должны получить измененный текстпроп.