reactjs - 如何使用@connect 处理对组件的路由参数更改

Question

我有一个 Route 匹配类似的东西/roles/:id并呈现到右侧窗格中（见下文）。我用来将一些道具和动作传递到我的组件中，其中一个动作根据钩子中@connect的路由参数获取一些数据。idcomponentWillMount

我的问题是我想不出一种干净的方法来确保当用户单击右侧列表上的不同实例从而更改路线（但不是卸载/安装组件！）时，再次触发该操作.

我曾想过挂钩componentWillReceiveProps，但显然这将创建一个无限渲染循环。我在这里错过了什么吗？

Answer 1

有两种方法可以做到这一点

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为容器组件准备了第一个解决方案