ferchOnUpdate about redux-react-router-async-example HOT 2 CLOSED

Hey, basically when you use react-router and you have a route like /users/:id, where id can change, you want to fetch the new user every time the url param changes.

So you need something like componentDidUpdate which checks if props changed and eventually fetch new data. So you would need that for each component that does data fetching.
The decorators basically abstract this logic allowing you to just specify in a clean and nice way the params that you are interested in and what kind of actions you want to trigger.

@fetchOnUpdate([ 'username', 'repo' ], (params, actions) => {
  const { username, repo } = params
  actions.fetchRepo({ username, repo })
  actions.fetchRepoStargazers({ username, repo })
})

This means:

• check username and repo params and get their values from this.props.params (RR)
• call the callback function with those params and the actions which were passed from the smart component
• whenever params change the callback function is called, causing new data to be fetched

Hope this answer your question :)

from redux-react-router-async-example.

you want to fetch the new user every time the url param changes.

I've just added Redux to my application and moved my data fetching logic from componentDidMount/componentWillReceiveProps to a Redux action. I've been researching the best to dispatch actions when the URL updates from navigation/someone deep linking.

First I used react-router-redux to listen to history changes, and then dispatch actions based on the URL using a switch.

This seems to work, and I really like that all data updates live outside of the react components. This way the components are never required to initiate data fetching; it's all handled by Redux. This feels like a good separation of concern. My view layer doesn't have to worry about dispatching anything when the URL changes.

After reading that react-router-redux was only intended to ensure URL updates are included in the Redux store for Time Travel via DevTools, I decided to do some more research.

This is probably my favourite solution so far (storing URL in a Redux store and observing changes using RxJS):
reduxjs/redux#227 (comment)

I'm interested if you would still use your fetchOnUpdate HOC solution today, or have you found any alternative solutions to this problem that you prefer?

from redux-react-router-async-example.