How to pass data received to another page using redux
<p>I am making a react-native app and using redux routing. I am fairly new to these technologies. I am making a api call on a page and displaying a list. On Clicking a list item the app redirects to another page which shows the details. How do i pass the data received on the first page to the detail page to display the content. This is what my first page looks like. Also how do i access this on the second page</p>

<pre><code>class MovieDetails extends Component {
constructor(props) {
   super(props)
   this.state = {
        results: [],
        loading: true
   }
}
_fetchData() {
   fetch("http://example.com/data.json", {
        method: "GET"
    })
   .then((response) =&gt; response.json())
   .then((responseData) =&gt; {
        console.log(responseData)
        this.setState({
                results: responseData,
                loading: false
        })
   })
   .done()
}

pushNewRoute(route) {
    this.props.pushNewRoute(route)
}

componentDidMount() {
     this._fetchData()
}

render() {


    return (

        &lt;Container theme={theme} style={{backgroundColor: '#262626'}}&gt;
            &lt;Image source={require('../../../images/img.png')} style={styles.container}&gt;
                &lt;Header&gt;
                    &lt;Button transparent onPress={this.props.openDrawer} style={Platform.OS === 'android' ? headerStyles.aheaderIcon : headerStyles.iosheaderIcon} &gt;
                        &lt;Icon name="ios-menu" /&gt;
                    &lt;/Button&gt;
                    &lt;Text style={headerStyles.textHeader}&gt;Movies&lt;/Text&gt;
                    &lt;Image
                      transparent
                      source={require('../../../images/Header-Logo.png')}
                      style={[headerStyles.logoHeader, Platform.OS === 'android' ? headerStyles.aheaderIcon : headerStyles.iosheaderIcon]} /&gt;
                &lt;/Header&gt;

                &lt;Content&gt;


                   &lt;View style={{backgroundColor: '#fff'}}&gt;

                    { 
                         this.state.results.map(function(data, index) {
                             return (

                                 &lt;TouchableOpacity 
                                    key={index}
                                    style={{flexDirection: 'row'}} 
                                    onPress={() =&gt; this.pushNewRoute('movieDetails')}&gt;
                                        &lt;Image source={{uri: data.thumb}} style={styles.movieImage} /&gt;
                                        &lt;View style={styles.movieContent}&gt;
                                            &lt;Text numberOfLines={2} style={styles.movieHeader}&gt;
                                                {data.headline}
                                            &lt;/Text&gt;
                                            &lt;View style={{flexDirection:'row', marginLeft: -20, marginTop: 25}}&gt;
                                                &lt;Icon name="ios-time-outline" style={ Platform.OS === 'android' ? styles.aHeadertimeIcon : styles.iosHeadertimeIcon} /&gt;
                                                &lt;Text style={styles.moviePosterLink}&gt;{data.date} at {data.time}&lt;/Text&gt;
                                            &lt;/View&gt;
                                        &lt;/View&gt;
                                    &lt;/TouchableOpacity&gt;
                              )
                        }, this)
                    }

                    &lt;/View&gt; 
                &lt;/Content&gt;
            &lt;/Image&gt;
        &lt;/Container&gt;
    )
}

}

function bindAction(dispatch) {
return {
    openDrawer: ()=&gt;dispatch(openDrawer()),
    pushNewRoute:(route)=&gt;dispatch(pushNewRoute(route))
}
}

export default connect(null, bindAction)(MovieDetails)
</code></pre>