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 : {}
}

謝謝!

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可以使功能更加完善可以领救济金的游戏,但這完全沒有必要。

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())} />

它有點笨拙可以领救济金的游戏,但是可以用,我現在不知道更好的解決方案。

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

1)對路線更改發送樂觀的請求操作,即BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

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

answered 2020-02-22T18:26:14Z
translate from