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

Question

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

我的问题是，当用户点击右侧列表中的不同实例，从而改变路径（但不是取消/挂载组件！）时，我无法想到一种干净的方法来确保操作再次被解雇。

我曾想过挂钩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用于容器组件