Как сохранить и отобразить значение текстового ввода с избыточным в реагировать родной? - PullRequest
Новая
       5

Как сохранить и отобразить значение текстового ввода с избыточным в реагировать родной?

0 голосов
/ 17 января 2019

Союзы и редукторы, редукторы, редукторы, саблю, сабля, охранники и усреднения, редукторы, похожие на обычные реакции, родные реакции на редукторы и редукции 

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

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Text: '',
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    placeholder="Enter Text"
                    value={this.state.Text}
                    onChangeText={Text => this.setState({ Text })}
                />
                <Text>{this.state.Text}</Text>
            </View>
        );
    }
}
export default App;

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

Я хотел бы, чтобы кто-нибудь рассказал мне, как изменить дизайн этого кода, чтобы использовать его с redux

1 Ответ

0 голосов
/ 17 января 2019

Пожалуйста, взгляните на пример документа-редуктора: https://redux.js.org/basics/example. Это даст вам хороший пример для вашей установки.

Вам нужно будет создать избыточный магазин и редукторы . Кроме того, вам нужно будет обернуть компонент приложения в избыточный provider.

Для чего-то подобного вы можете создать хранилище прямо в файле index.js, а затем создать папку reducer, возможно, в вашей директории src. (Редакция документов поможет вам в создании файлов).

Я бы добавил какую-нибудь кнопку submit, чтобы вы не отправляли действие редукторному редуктору каждый раз, когда пользователь добавляет текст, а затем добавляете функцию для отправки текста в хранилище редуксов в кнопке. .

Например: 

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

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        Text: '',
    }
    this.submitText = this.submitText.bind(this);
  }

  submitText() {
    let { Text} = this.state;
    const { dispatch } = this.props;
    dispatch({type: <name of your action type>, payload: Text });
  }  

  render() {
    return (
        <View style={styles.container}>
            <TextInput
                placeholder="Enter Text"
                value={this.state.Text}
                onChangeText={Text => this.setState({ Text })}
            />
            <Text>{this.state.Text}</Text>
            <Text >Submit</Text>
            <Button
              onPress={this.submitText}
              title="Submit"
              color="#841584"
            />
        </View>
    );
   }
 }
 export default connect()(App);

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

Обратите внимание на метод connect по умолчанию при экспорте и отправку в submitText. Метод connect - это то, что подключит ваш компонент к redux, а диспетчеризация - это то, что отправляет действие или данные в редуктор и в хранилище redux.

...