React / Redux - 在各个路由上进行单独的提取调用

Question

我有一个redux商店，我想连接到我的应用程序，但我也想只获取与react-router正在呈现的特定组件相关的数据。

此时它连接到一个容器元素（App.js），然后将所有道具提供给路由器的子项。这感觉有点笨拙。

这就是我所拥有的：

App.js

class App extends Component { 
    render() { 

       return ( 
          <div> 
             {React.cloneElement(this.props.children, this.props)}
          </div> 
       ) 
    } 
 } 

 const mapStateToProps = (state, { params }) => { 
    {/*all props here*/}
    } 
 } 

 // connect App component to redux store
 App = withRouter(connect( 
    mapStateToProps, 
    actions 
)(App)); 

export default App;

Root.js

const Root = ({ store }) => ( 
    <Provider store={store}> 
       <Router history={browserHistory}> 
          <Route path='/' component={App}>
             <Route path='/users' component={Users} />
             <Route path='/posts' component={Posts} />
          </Route> 
       </Router> 
    </Provider> 
 ) 

 export default Root; 

因此，您可以看到react路由器负责处理正在呈现的组件。我想根据响应路由器，和componentDidMount基于活动路由呈现组件，使相关数据获取。

Users.js

class Users extends Component {
   render() {
       componentDidMount() {
          fetchData(users) 
       }
       return (
          <div>Users content here...</div>
       )
   }
}

Posts.js

class Posts extends Component {
   render() {
       componentDidMount() {
          fetchData(posts) 
       }
       return (
          <div>Posts content here...</div>
       )
   }
}

正如您所看到的，我将根据已安装的组件单独调用API，以确定要调用的端点。

然而，这似乎是重复的，我认为这是不好的做法。是否有更简洁/优雅的方式来实现我的目标？

提前致谢。

Answer 1

我建议使用@Decorator，例如：

这样，您可以在一个地方维护所有数据提取代码，并且只传递您需要的数据的路由。

如果您不熟悉这些工作方式，请here's阅读材料

import React, { Component } from 'react';
import URL from 'API'
import axios from 'axios';

const decorator = ComposedComponent => {
  const component = class extends Component {
    get = (path, params) => {
      return fetch(`${URL}/${path}`, { params }).then(res => res.json());
    };

    post = (url, params) => {
      return axios.post(url, params);
    };

    render() {
      return (
        <ComposedComponent
          {...this.props}
          get={::this.get}
          post={::this.post}
        />
      );
    }
  };

  return component;
};

export default decorator;
module.exports = decorator;

Answer 2

您可以fetch onEnter react-router来<Route path="/users" component={User} onEnter={fetchUsers} 挂钩DD-Mon-YYYY。来自spec

  

enter hook是一个用户定义的函数，在路由时调用   即将被渲染

     

如果一个enter钩子需要异步执行，它可能会列出第三个   必须调用的回调参数才能导致转换   继续。

'10-JAN-2016'

希望它能帮到你