2017-05-10 20 views
1

反応するネイティブアプリでは2ページあります。 2ページにデータがあるレキシックスストアをアップロードした場合は、1ページに戻ります - 2ページからアップロードされたデータでストアにアクセスするにはどうすればよいですか?それで、反応したネイティブのすべてのページのデータを使ってストアにアクセスする方法はありますか? たぶん黙想の例か、どこで読むのですか? おかげreduxストアをページ間でネイティブで反応させるにはどうすればいいですか?

1page.js 
    class ScreenHome extends Component{ 

     static navigationOptions = { 
      title: 'ScreenHome', 
     }; 
     constructor(props){ 
      super(props) 
      console.log("PROPS: ",props); 
     } 
     render() { 
      const { navigate } = this.props.navigation; 
      return (
       <View> 
        <Button 
         title="Go to load data page" 
         onPress={() => navigate('New', { name: 'Jane' })} 
        /> 
        <Button 
         title="Get redux data" 
         onPress={() => {console.log(this.props)}} 
        /> 
       </View> 
      ); 
     } 
    } 

    class ScreenRegister extends Component{ 
     static navigationOptions = { 
      title: 'ScreenRegister', 
     }; 
     render(){ 
      return <Text>ScreenRegister</Text> 
     } 
    } 
    const MainScreenNavigator = DrawerNavigator({ 
     Recent: { 
      screen: ScreenHome 
     }, 
     All: { 
      screen: ScreenRegister 
     }, 
    }); 
    export default SimpleApp = StackNavigator({ 
     Home: { 
      screen: MainScreenNavigator 
     }, 
     Chat: { 
      screen: ScreenHome 
     }, 
     New: { 
      screen: testScreen 
     } 
    }); 
    const mapStateToProps = (state) => { 
    const {items, isFetching, done} = state.myTestData 
    return {testScreen:{items, isFetching, done}}; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     getNewItems:() => { 
      dispatch(fetchData()); 
     } 
    } 
} 

export default someTest = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SimpleApp) 



    2page.js 
     class testScreen extends Component{ 
      static navigationOptions = { 
       title: 'testScreen.js', 
      }; 


      _reduxStuff =() => { 
       this.props.getNewItems(); 
      } 
      render() { 
       const { navigate } = this.props.navigation; 
       const {done, items, isFetching} = this.props.testScreen; 
       return (
        <View> 
         <Text>Some new screen</Text> 
         <Button 
          title="Load Data" 
          onPress={() => this._reduxStuff()} 
         /> 
        </View> 
       ); 
      } 
     } 

     const mapStateToProps = (state) => { 
      const {items, isFetching, done} = state.myTestData 
      return {testScreen:{items, isFetching, done}}; 
     } 

     const mapDispatchToProps = (dispatch) => { 
      return { 
        getNewItems:() => { 
         dispatch(fetchData()); 
        } 
      } 
     } 

     export default FilterLink = connect(
      mapStateToProps, 
      mapDispatchToProps 
     )(testScreen) 

答えて

2

は、各ページのコンテナ、あなたがこの店を変更するページとアクションの間にアクセスするデータのストアがあるはずです。 mapStateToPropsを使用すると、このストアをページのコンテナに渡すことができます。良い例はhereです。

+0

ありがとうございました。私は各ページの接続コンテナを追加しましたが、最初のページには私の店を持っていませんが、次のページではすべて問題ありません。 StackNavigatorとReduxに問題はありますか? – SERG

+0

問題はありません。たぶんコンテナやレデューサーのコードについてです。コンテナがストア状態を取得するかどうかを確認します。減速機をチェックしていない場合。 –

1

最初のコンテナでは、ストアを満たすために非同期呼び出しを行う必要があります。

componentWillMount()で発送し、店舗に受信データを入力することができます。

関連する問題