我有一个 Route 匹配类似的东西/roles/:id
并呈现到右侧窗格中(见下文)。我用来将一些道具和动作传递到我的组件中,其中一个动作根据钩子中@connect
的路由参数获取一些数据。id
componentWillMount
我的问题是我想不出一种干净的方法来确保当用户单击右侧列表上的不同实例从而更改路线(但不是卸载/安装组件!)时,再次触发该操作.
我曾想过挂钩componentWillReceiveProps
,但显然这将创建一个无限渲染循环。我在这里错过了什么吗?
我有一个 Route 匹配类似的东西/roles/:id
并呈现到右侧窗格中(见下文)。我用来将一些道具和动作传递到我的组件中,其中一个动作根据钩子中@connect
的路由参数获取一些数据。id
componentWillMount
我的问题是我想不出一种干净的方法来确保当用户单击右侧列表上的不同实例从而更改路线(但不是卸载/安装组件!)时,再次触发该操作.
我曾想过挂钩componentWillReceiveProps
,但显然这将创建一个无限渲染循环。我在这里错过了什么吗?
有两种方法可以做到这一点
1-使用装饰器模式获取数据,redux-async-connect
2-像这样使用redux-thunk
export function fetchFoo(id) {
return dispatch => {
dispatch({type:'LOADING'});
fetch(`/book/${id}`, (response) => {
if(response.status == 200){
dispatch({type:'SUCCESS'});
}else {
dispatch({type:'FAIL'});
}
})
}
}
初始状态应该loading=true
是isLoaded=true
在LOADING
减速器中,您应该在触发操作之前设置loading=true
您的状态并检查loading
标志fetchFoo
,这样您就不会有无限的请求
componentWillReceiveProps:(nextProps){
if(!nextProps.loading && !nextProps.isLoaded){
fetchFoo(params);
}
}
我decorator-pattern
为容器组件准备了第一个解决方案