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

Question

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

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

我曾想过连接到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 并在触发fetchFoo 操作之前检查loading 标志 这样你就不会有无限的请求了

componentWillReceiveProps:(nextProps){
  if(!nextProps.loading && !nextProps.isLoaded){
    fetchFoo(params);
  }
} 

我准备使用decorator-pattern 作为容器组件的第一个解决方案