How to fetch the new data in response to React Rou

2019-01-21 02:27发布

问题:

I'm using Redux, redux-router and reactjs.

I'm trying to make an app where I fetch information on route change, so, I've something like:

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

When someone enters to artist/<artistId> I want to search for the artist and then render the information. The question is, what it's the best way of doing this?

I've found some answers about it, using RxJS or trying a middleware to manage the requests. 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? Right now I'm doing this by triggering an action in those functions that request information and the component re-renders when the information has arrived. The component has some properties for letting me know that:

{
    isFetching: true,
    entity : {}
}

Thanks!

回答1:

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?

You can totally do that in componentDidMount() and componentWillReceiveProps(nextProps).
This is what we do in real-world example in Redux:

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);
    }

  /* ... */

}

You can get more sophisticated with Rx, but it's not necessary at all.



回答2:

I've did this with custom binding on plain router onEnter/onLeave callback props like this:

const store = configureStore()

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

It's a bit hacky but works, and I don't know better solution right now.



回答3:

1) dispatching optimistic request actions on route changes, i.e. BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) Async Actions: http://redux.js.org/docs/advanced/AsyncActions.html