How to pass data received to another page using redux

Question

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

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

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

componentDidMount() {
     this._fetchData()
}

render() {


    return (

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

                <Content>


                   <View style={{backgroundColor: '#fff'}}>

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

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

                    </View> 
                </Content>
            </Image>
        </Container>
    )
}

}

function bindAction(dispatch) {
return {
    openDrawer: ()=>dispatch(openDrawer()),
    pushNewRoute:(route)=>dispatch(pushNewRoute(route))
}
}

export default connect(null, bindAction)(MovieDetails)

Answer 1

EDIT: I overlooked and assumed you store your fetched data in a store. But that didn't happen. I suggest you take a look at: https://github.com/reactjs/redux/tree/master/examples/real-world

Below are the steps you could implement what you want:

1. First page - Save your fetched data in a store using an action.
2. Second page - Connect your second page to the same store and access it from there.

The key is that you need to connect the store to your React state so you could access them. In your container, connect your store to your UI.

export default connect((state, ownProps) => ({ state: { Movies: state.Movies, ownProps }), null)(MovieDetails);

then you could pass it down to your UI layer this way:

render() {
    const { state, ownProps } = this.props;
    return (<UI Movies={state.Movies} {...ownProps} />);
}

Finally you could access it in your UI component:

this.props.Movies