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

Question

我制作了一个反应原生应用程序并使用了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状态，以便您可以访问它们。在您的容器中，将商店连接到您的用户界面。

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