Question: Is data retrieved on every route change?

[Kareem Janoudi]

I have a structure as follows:

App.js:


@asyncConnect([{
    key: 'config',
    promise: ({helpers}) => helpers.client.get('config')
}])
@connect(
    state => ({
        config: state.reduxAsyncConnect.config,
        configLoad: state.reduxAsyncConnect.loadState.config
    })
)
export default class App extends Component {
...
}

@asyncConnect([{
    key: 'media',
    promise: ({helpers, params}) => helpers.client.get(`media/${params.uuid}`)
}])
@connect(
    state => ({
        media: state.reduxAsyncConnect.media,
        mediaLoad: state.reduxAsyncConnect.loadState.media
    }),
    {pushState: push}
)
export default class Container extends Component {
...
render() {
<div> ...
{this.props.children}
</div>
}
}

It seems that when i navigate throughout my app, changing routes, when the children of Container are changed/altered, it is triggering a load of the asyncConnect decorator for both App and Container every time. Is there a way to say, "hey, this data is loaded already, we dont need to look for it again"? Something like a shouldComponentUpdate but for asyncConnect to prevent it from dispatching an unnecessary call?

Thanks

[Andrés]

You have access to store on decorator:

@asyncConnect([{
  key: 'config',
  promise: (options) => {
    const state = options.store.getState();

    if (!state.config) {
       return options.helpers.client.get('config');
    }

  },
}]) 

[Kareem Janoudi]

@andresgutgon got it, thank you!

[David Bismut]

Hey @andresgutgon, I'm storing some of my app state in URL params or hash. It seems like the data is reloaded every time the route changes (for example moving from '/page1' to '/page1#anchor1' triggers a data fetch). Should I use the same technique as the one you've stated above?

Thanks!

David

[Andrés]

Should I use the same technique as the one you've stated above?

If what you want is to avoid an extra fetch. Yes check for the condition you need before doing the api call.

You have also access to route params in @asyncConnect decorator so you can check if it's a route that you want to do a fetch.

[David Bismut]

Hey @andresgutgon, many thanks for the quick reply.

Since I would ideally need to disable asyncConnect globally only for hash or param changes, I'll try to see if this is achievable differently. Thanks again!