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

Question

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

我的问题是我想不出一种干净的方法来确保当用户单击右侧列表中的不同实例时，从而更改路由（但不是 un/mounting 组件！ ), 再次触发动作。

我考虑过挂接到 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 reducer 中你应该在你的状态下设置 loading=true 并在触发 fetchFoo 操作之前检查 loading 标志这样你就不会有无限的请求

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

我首选第一个解决方案，使用 decorator-pattern 容器组件

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

how to handle route param changes to component using @connect

reactjs

react-router

redux

react-redux