如何使用redux将接收到的数据传递到另一个页面

Question

我正在制作一个react-native应用程序，并使用redux路由。我对这些技术相当陌生。我在一个页面上做一个api调用，并显示一个列表。点击一个列表项目，应用程序重定向到显示详细信息的另一个页面。我如何将第一页上收到的数据传递到详细页面以显示内容。这是我的第一页。另外，我如何在第二页访问这个

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

编辑:我忽略并假设您将获取的数据存储在存储中。但这并没有发生。我建议你看一下:https://github.com/reactjs/redux/tree/master/examples/real-world

下面是你可以实现你想要的步骤:

1. 首页-使用操作将获取的数据保存在存储中。
2. 第二页-将您的第二页连接到相同的存储并从那里访问它。

关键是你需要将存储连接到你的React状态，这样你才能访问它们。在容器中，将商店连接到UI。

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

那么你可以这样传递它到你的UI层:

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

最后你可以在你的UI组件中访问它:

this.props.Movies