反応ナビゲーションを使用しているときに反応ネイティブの状態を管理する

Question

反応ネイティブのToDoアプリケーションを作成しようとしています。既存のタスクの編集やタスク履歴の表示など、いくつかの追加機能があります。 TabNavigator内に2つのStackNavigatorsがネストされていますが、アプリケーションに状態を渡す方法を見つけようとしています。状態/データをアプリケーションで利用できるようになったら、アプリケーションの状態を更新する必要があります。ここで

は私のアプリに関連するコードです：

export default class App extends React.Component { 

    constructor(props){ 
     super(props) 
     this.state = { 
      data: [ 

       //Array of to-do objects here. 
      ] 
     } 
    } 

    updateAppData(id,){ 

    //define function that wraps this.setState(). This will be passed into 
    application to update application state. 
    } 

    render(){ 
     return(
      <Root screenProps={this.state}/> 
     ) 
    } 
} 

//make Todos Stack-Nav section to sit inside tab1 
const TodosWrapper = StackNavigator({ 

    CurrentTodos: { screen: CurrentTodos }, 
    Details: { screen: Details}, 
    EditTodo: { screen: EditTodo}, 
    AddNewTodo: { screen: AddNewTodo} 

}) 

//make History Stack-Nav section to sit inside tab2 
const HistoryWrapper = StackNavigator({ 

    CompletedTodos: { screen: CompletedTodos }, 
    CompletedDetails: { screen: CompletedDetails } 

}) 

//Make main tab navigation that wraps tabs 1 and 2 
const Root = TabNavigator({ 

    Todos : { 
     screen: TodosWrapper, 
     title: "Open Tasks" 
    }, 
    History: { screen: HistoryWrapper } 
}) 

私は、下記のような、私の画面の中に私のアプリの状態を渡したい：

export default class CurrentTodos extends React.Component { 

static navigationOptions = { 
    header: null 
} 
render(){ 
    const { navigate } = this.props.navigation; 
    let { data } = this.props.screenProps; 
    data = data.map((item, id) => (

      <ListItem style={styles.listItem} key={"_"+id}> 
       <View style={styles.textWrapper}> 
        <Text style={styles.listItemTitle}>{item.title}</Text> 
        <Text note>{ item.isComplete ? "Complete" : "In Progress" }</Text> 
        <Text note>{item.description}</Text> 
       </View> 
       <View> 
        <Button 
         onPress={() => this.props.navigation.navigate('Details')} 
         title="Full Details" 
         style={styles.fullDetails} 
        /> 
       </View> 
      </ListItem> 
     ) 
    ); 

    return (
     <ScrollView style={styles.scrollView}> 
      <View style={styles.viewHeader}> 
       <Text style={styles.title}> 
        Current Tasks 
       </Text> 
       <Text 
        style={styles.addNew} 
        onPress={() => navigate("AddNewTodo")} 
       > 
        + 
       </Text> 
      </View> 
      <List> 
       {data} 
      </List> 
     </ScrollView> 
    ) 
} 

}

私は現在、screenProps = {this.state}を使って自分の画面に状態を渡し、画面のコンポーネントがアプリケーションの状態を更新できるようにthis.setState（）をラップする関数を渡す予定です。

私はこのすべての初心者なので、私は貧しい習慣を拾わないようにしたいと思います。

これが正しいアプローチであるかどうかは誰でも助けてくれますか？膨大な量の文書は時々圧倒されています！前もって感謝します！

Answer 1

集中型の状態を望むなら、間違いなくreduxに試してみるべきです。 Reduxは、グローバルな不変状態マネージャです。

要約すると、あなたのすべての状態はトップのナビゲータをラップする「ストア」に保存されます。このストアは、アプリケーションの現在の状態を保持している多くの「Reducers」によって構成されています。コンポーネントは、レデューサーが受け取ったアクションを使用してストアと通信し、新しいステートをビューに伝え、必要な変更を処理します。

詳細を追加する必要がある場合は教えてください。そして、ここであなたには、いくつかのあなたがチェックするための参照を持っている：これはあなたを取得する必要がありますhttps://www.udemy.com/the-complete-react-native-and-redux-course/

：

公式サイト：作成者からhttp://redux.js.org

チュートリアル：https://egghead.io

コース正しい方向に！ 幸運を祈る！