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

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

谢谢!

Franco Risso asked 2020-02-22T18:24:57Z
3个解决方案
60 votes

现在,我的问题是,这真的必要吗?还是保持体系结构不可知的一种方法? 我可以直接从react componentDidMount()和componentDidUpdate()获取我需要的信息吗?

您可以在real-worldcomponentWillReceiveProps(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可以使功能更加完善,但这完全没有必要。

Dan Abramov answered 2020-02-22T18:25:25Z
19 votes

我在普通路由器onEnter / onLeave回调道具上通过自定义绑定来完成此操作,如下所示:

const store = configureStore()

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

它有点笨拙,但是可以用,我现在不知道更好的解决方案。

Victor Suzdalev answered 2020-02-22T18:25:49Z
3 votes

1)对路线更改发送乐观的请求操作,即BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

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

Dennis Krupenik answered 2020-02-22T18:26:14Z
translate from https://stackoverflow.com:/questions/32846337/how-to-fetch-the-new-data-in-response-to-react-router-change-with-redux