55

我正在使用 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 : {}
}

谢谢！

4

3 回答 3

64

现在，我的问题是，这真的有必要还是只是保持架构与反应无关的一种方式？我可以从 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 变得更复杂，但这根本不是必需的。

于 2015-10-03T12:58:52.590 回答
21

我已经在普通路由器 onEnter/onLeave 回调道具上进行了自定义绑定，如下所示：

const store = configureStore()

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

这有点hacky但有效，我现在不知道更好的解决方案。

于 2015-10-03T13:07:21.580 回答
4

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

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

于 2015-09-29T14:38:21.540 回答