如何在Redux中获取新数据以响应React路由器的更改

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

现在，我的问题是，这真的是必要的，还是仅仅是保持体系结构反应不可知论的一种方式?我可以从react componentDidMount()和componentDidUpdate()获取我需要的信息吗?

完全可以在componentDidMount()和componentWillReceiveProps(nextProps)中这样做。
这就是我们在Redux的real-world示例中所做的:

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 2

我已经在普通路由器的onEnter/onLeave回调道具上做了这样的自定义绑定:

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

Answer 3

1)调度路由变化时的乐观请求动作，即BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

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