如何使用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