Don't re-fetch in layouts what are not changes in route transition

[alexeybondarenko]

First of all, thanks for this library. I'm using it in all my projects. I'm really appreciated.

I'm strictly following the rule "fetch the data in the layout, pages, where they are used". So, the global data is fetching on some main layout of the app, and specific data for the page is fetching on that page.

I see that when I define a fetch hook in global layout, it's re-fetching on every transition between the pages, that are included in this layout.

<Route component={GlobalLayout}> // fetch api/global
  <Route path="/page-a" component={PageA} /> // fetch api/page-a
  <Route path="/page-b" component={PageA} /> // fetch api/page-b
</Router>

According to this example, when I go from pageA to pageB, fetch for api/global is triggered again, but it was fetched previously.

Can you recommend a way to avoid this?

[dlmr]

Hello! 👋

Glad to hear that you like it, means a lot!

I suggest implementing some type of bailout as mentioned here, #21 (comment). There are also several examples of this in the examples, like here https://github.com/dlmr/react-router-redial/blob/master/examples/redux/components/User.js#L11-L16.

Hope that helps you! 🙂

[alexeybondarenko]

Thanks!

So do you recommend to implement cache on redux layer?
Do you consider to create the flag to control the re-trigger the hooks if the layout that was not unmounted and router render props (params) for this layout were not changed?

[dlmr]

Yes exactly!

I think this feature makes the most sense to stay in userland as the application writer will know much better when it's appropriate to fetch new data or not.

But I'm open for a PR that implements this if the code is clean and well defined. 🙂