如何获取新数据以响应React路由器使用Redux进行更改?
我正在使用Redux,redux-router和reactjs。
我试图做一个应用程序,我获取路线变化的信息,所以,我有这样的:
<Route path="/" component={App}> <Route path="artist" component={ArtistApp} /> <Route path="artist/:artistId" component={ArtistApp} /> </Route>
当有人进入artist/<artistId>
我想search艺术家,然后呈现信息。 问题是,这样做的最好方法是什么?
我已经find了一些答案,使用RxJS或尝试一个中间件来pipe理请求。 现在,我的问题是,这是真正必要还是只是一种方法来保持体系结构的反应不可知论? 我可以直接从反应componentDidMount()和componentDidUpdate()获取我需要的信息吗? 现在我正在通过触发这些函数中的请求信息的操作来执行此操作,并且在信息到达时重新呈现组件。 该组件有一些让我知道的属性:
{ isFetching: true, entity : {} }
谢谢!
现在,我的问题是,这是真正必要还是只是一种方法来保持体系结构的反应不可知论? 我可以直接从反应componentDidMount()和componentDidUpdate()获取我需要的信息吗?
你完全可以在componentDidMount()
和componentWillReceiveProps(nextProps)
做到这componentWillReceiveProps(nextProps)
。
这就是我们在Redux中的real-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); } /* ... */ }
您可以使用Rx更复杂,但根本没有必要。
我已经做了这个自定义绑定在普通路由器onEnter / onLeavecallback道具是这样的:
const store = configureStore() //then in router <Route path='/myRoutePath' component={MyRouteHandler} onEnter={()=>store.dispatch(myRouteEnterAction())} />
这有点冒险,但工作,我现在不知道更好的解决scheme。
1)调度对路由变化的乐观请求动作,即BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));
2)asynchronous操作: http : //redux.js.org/docs/advanced/AsyncActions.html