如何从反应路由器获取 id/params 到 redux 操作？

Question

目前我有一个对象列表页面。我想显示单个对象的详细信息页面（一切都是用 Reactjs 完成的）。列表对象有一个这样的链接：

<Link to={'/detail/'+this.props.data.id} >Read more</Link>  

单击链接时，它指向另一个页面，我想在其中显示该特定对象的所有详细信息。该特定对象的详细信息从http://127.0.0.1:8000/api/v1/songs/55 获取，其中 55 是对象的 id。我正在使用 Redux 从 API 获取数据。

ListingPage.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'

class List extends React.Component {
    render() {
      return (
         <div>
            <Link to={'/detail/'+this.props.data.id} >Read more</Link>                      
        </div>
      );
   }
}
export default List

Home.js

import React from 'react'; 
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; 
import List from './ListPage.js'; 
import Detail from './Detail.js'

class Home extends React.Component {    
     render(){      
       return(
            <Router>
              <Switch>
                <Route exact path="/" component={List} />
                <Route path="/detail/:number" component={Detail} />
              </Switch>
            </Router>
        )
    }
 }
 export default Home

Detail.js

import React from 'react';

class Detail extends React.Component {
    render() {
        return (
           <div>{**display details here**}</div>
        )
    }
} 
export default Detail

当前点击链接，它指向另一个页面，但没有显示详细信息。我不知道如何从 react-redux 中的 Link url 获取 id。请帮我。 （说真的我必须使用 Redux）

Answer 1

您可以使用mapStateToProps 读取由react-router 传递给您的组件的路由参数。您的 :number 命名参数将在 ownProps.match.params.number 可用，您需要将其传递到您的组件中。

然后，您的组件会将其传递给您的操作创建者以加载数据。

更多细节在 cmets 中：

import React from 'react';
import { connect } from "react-redux";

class Detail extends React.Component {
    componentWillMount() {
        // When the component mounts 
        // call your action creator to load the details, 
        // if songDetails are not already available
        if (!this.props.songDetails) 
            this.props.loadSongDetails(this.props.songId);
    }

    render() {
        // Don't show anything until songDetails are loaded
        // Optionally, you can also show a loading screen for better user experience
        if (!this.props.songDetails) return null;

        // Once songDetails are loaded, you can use `this.props.songDetails` to populate your UI
        return (
            <div>{this.props.songDetails}</div>
        )
    }
}

/**
 * 'mapStateToProps' gets a second parameter which contains the props passed directly to the component
 * In this case, react-router will pass route parameters to it.
 * Route parameters will include your named parameter ":number" at "match.params.number".
 * You can pass this parameter into your component, and later pass it into your loading function.
 *
 * "getSongDetails" is a selector function which gets the songDetails from your redux store.
 */
const mapStateToProps = (state, ownProps) => ({
    songId: ownProps.match.params.number,
    songDetails: getSongDetails(state)
});

/**
 * Use 'mapDispatchToProps' to pass your action creator into your component.
 * This action creator will be called with songId when the component loads.
 */
const mapDispatchToProps = (dispatch) => ({
    loadSongDetails: (songId) => dispatch(loadSongDetailsActionCreator(songId))
});

/**
 * Use Redux's "connect" HOC to pass props into your component.
 */
export default connect(mapStateToProps, mapDispatchToProps)(Detail);