Javascript 如何获取新数据以响应 Redux 的 React Router 更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32846337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fetch the new data in response to React Router change with Redux?
提问by Franco Risso
I'm using Redux, redux-router and reactjs.
我正在使用 Redux、redux-router 和 reactjs。
I'm trying to make an app where I fetch information on route change, so, I've something like:
我正在尝试制作一个应用程序，在其中获取有关路线更改的信息，因此，我有以下内容：
<Route path="/" component={App}>
<Route path="artist" component={ArtistApp} />
<Route path="artist/:artistId" component={ArtistApp} />
</Route>
When someone enters to artist/<artistId>I want to search for the artist and then render the information. The question is, what it's the best way of doing this?
当有人进入时，artist/<artistId>我想搜索艺术家，然后呈现信息。问题是，这样做的最佳方法是什么？
I've found some answers about it, using RxJS or trying a middleware to manage the requests. Now, my question is, Is this really necessary or just a way to keep the architecture react-agnostic? Can I just fetch the information I need from react componentDidMount() and componentDidUpdate() instead? Right now I'm doing this by triggering an action in those functions that request information and the component re-renders when the information has arrived. The component has some properties for letting me know that:
我找到了一些关于它的答案，使用 RxJS 或尝试使用中间件来管理请求。现在，我的问题是，这真的有必要还是只是一种保持架构与反应无关的方法？我可以只从 react componentDidMount() 和 componentDidUpdate() 获取我需要的信息吗？现在我通过在那些请求信息的函数中触发一个动作来实现这一点，当信息到达时组件会重新呈现。该组件有一些属性让我知道：
{
isFetching: true,
entity : {}
}
Thanks!
谢谢！
回答by Dan Abramov
Now, my question is, Is this really necessary or just a way to keep the architecture react-agnostic? Can I just fetch the information I need from react componentDidMount() and componentDidUpdate() instead?
现在，我的问题是，这真的有必要还是只是一种保持架构与反应无关的方法？我可以只从 react componentDidMount() 和 componentDidUpdate() 获取我需要的信息吗？
You can totally do that in componentDidMount()and componentWillReceiveProps(nextProps).
This is what we do in real-worldexamplein Redux:
你完全可以在componentDidMount()和 中做到这一点componentWillReceiveProps(nextProps)。
这就是我们在 Reduxreal-world示例中所做的：
function loadData(props) {
const { fullName } = props;
props.loadRepo(fullName, ['description']);
props.loadStargazers(fullName);
}
class RepoPage extends Component {
constructor(props) {
super(props);
this.renderUser = this.renderUser.bind(this);
this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
}
componentWillMount() {
loadData(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.fullName !== this.props.fullName) {
loadData(nextProps);
}
/* ... */
}
You can get more sophisticated with Rx, but it's not necessary at all.
您可以使用 Rx 变得更复杂，但这根本没有必要。
回答by Victor Suzdalev
I've did this with custom binding on plain router onEnter/onLeave callback props like this:
我在普通路由器 onEnter/onLeave 回调道具上使用自定义绑定做到了这一点，如下所示：
const store = configureStore()
//then in router
<Route path='/myRoutePath' component={MyRouteHandler} onEnter={()=>store.dispatch(myRouteEnterAction())} />
It's a bit hacky but works, and I don't know better solution right now.
这有点hacky但有效，我现在不知道更好的解决方案。
回答by Dennis Krupenik
1) dispatching optimistic request actions on route changes, i.e. BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));
1) 调度路由变化的乐观请求动作，即 BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));
2) Async Actions: http://redux.js.org/docs/advanced/AsyncActions.html
