CODEWITHSUNDEEP
javascriptreactjsreact-routerredux
Franco Risso
Franco Risso

Reputation: 1582

How to fetch the new data in response to React Router change with Redux?

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!

Upvotes: 55

Views: 23616

Answers (3)

Dan Abramov
Dan Abramov

Reputation: 268255

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.

Upvotes: 64

Dennis Krupenik
Dennis Krupenik

Reputation: 676

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

Upvotes: 4

Victor Suzdalev
Victor Suzdalev

Reputation: 2212

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.

Upvotes: 21

Related Questions