別のコンポーネントからコンポーネントの状態を読み取る

Question

私はネイティブ開発に対応するのが非常に新しいです。私はいくつかの研究をしましたが、私が達成しようとしていることをやっていませんでした。 My * .jsファイルには2つのコンポーネントがあります。 1つは星の評価のためのコンポーネントです。もう1つは基本ビューを含んでいます。ビューの中にボタンを追加しました。私がしたいのは、ユーザーがボタンをタップすると、テキストフィールド（alredy working）からの入力と現在の評価が収集され、電子メールで送信されるということです。

質問：1）これはfluxxパターン/ reduxを使用して実装できますか？ 2）はいの場合：すべてのレビュックスコンポーネント（アクション、レデューサー、ストア）を別々のファイルに吐き出さなければなりませんか？ 3）いいえの場合：どのように？ここで

は私の現在のコードです：

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    TextInput, 
    View 
} from 'react-native'; 
import StarRating from 'react-native-star-rating'; 
import Button from 'react-native-button'; 
import {Actions} from 'react-native-router-flux'; 

export class GeneralStarExample extends Component { 

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

    onStarRatingPress(rating) { 
    this.setState({ 
     starCount: rating 
    }); 
    } 

    render() { 
    return (
     <StarRating 
     disabled={false} 
     maxStars={5} 
     rating={this.state.starCount} 
     selectedStar={(rating) => this.onStarRatingPress(rating)} 
     starColor={'gold'} 
     emptyStarColor={'gold'} 
     /> 
    ); 
    } 
} 

export default class FeedbackView extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { text: 'Useless Placeholder' }; 
    } 

    render() { 
    return(

     <View style={styles.container}> 
     <GeneralStarExample onUserInput={this.handleUserInput}/> 
     <View style ={styles.textinput}> 
     <TextInput 
      style={{height: 240, width: 300, alignSelf: 'center', borderColor: 'gray', borderWidth: 1}} 
      onChangeText={(text) => this.setState({text})} 
      value={this.state.text} 
      /> 
     </View> 
     <Button onPress={() => Actions.refresh({text: this.state.text, rating: this.props.rating})}>Senden</Button> 
     <Text>{this.props.text}</Text> 
     <Text>{this.props.rating}</Text> 
     </View> 
    ) 
    } 
} 

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

どうもありがとう、 Defrian

Answer 1

1）あなたは、必ずしもReduxのか、いずれかのフラックスのようなアーキテクチャを実装する必要はありませんが、それは非常に良いアプローチです私の考えでは。 Reduxは、コードをクリーンでスケーラブルに保つのに役立ちます。

2）すべてのファイルを1つのファイルに入れることができます。あなたのリデューサーとアクションは、基本的に単なる機能です。 Storeについては、reduxモジュールからcreateStore()への呼び出しを作成する必要があります。