如何获取新数据以响应 Redux 对 React Router 的更改？

Question

我正在使用 Redux、redux-router 和 reactjs。

我正在尝试制作一个应用程序来获取有关路线更改的信息，因此，我有类似的东西：

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

当有人进入artist/<artistId>我想搜索艺术家然后渲染信息。问题是，这样做的最佳方式是什么？

我找到了一些关于它的答案，使用 RxJS 或尝试使用中间件来管理请求。现在，我的问题是，这是否真的有必要，或者只是一种保持架构反应不可知的方法？我可以只从 react componentDidMount() 和 componentDidUpdate() 获取我需要的信息吗？现在，我通过在那些请求信息的函数中触发一个操作来实现这一点，并且当信息到达时组件重新呈现。该组件有一些属性让我知道：

{
    isFetching: true,
    entity : {}
}

谢谢！

Answer 1

1) 在路由更改时调度乐观请求操作，即 BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) 异步操作： http://redux.js.org/docs/advanced/AsyncActions.html

Answer 2

Now, my question is, Is this really necessary or just a way to keep the architecture react-agnostic? Can I just fetch the information I need from react componentDidMount() and componentDidUpdate() instead?

您完全可以在 componentDidMount() 和 componentWillReceiveProps(nextProps) 中做到这一点。
这就是我们在 Redux 中 real-world example 所做的：

function loadData(props) {
  const { fullName } = props;
  props.loadRepo(fullName, ['description']);
  props.loadStargazers(fullName);
}

class RepoPage extends Component {
  constructor(props) {
    super(props);
    this.renderUser = this.renderUser.bind(this);
    this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
  }

  componentWillMount() {
    loadData(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.fullName !== this.props.fullName) {
      loadData(nextProps);
    }

  /* ... */

}

您可以使用 Rx 变得更复杂，但这根本没有必要。

Answer 3

我已经在普通路由器 onEnter/onLeave 回调道具上使用自定义绑定来做到这一点：

const store = configureStore()

//then in router
<Route path='/myRoutePath' component={MyRouteHandler} onEnter={()=>store.dispatch(myRouteEnterAction())} />

它有点老套但是很管用，我现在不知道更好的解决方案。

如何获取新数据以响应 Redux 对 React Router 的更改？

How to fetch the new data in response to React Router change with Redux?

javascript

reactjs

react-router

redux