At the moment, your app will fetch data from a server and cache it.
When you refresh the page, data always comes from the local storage.
You can clear your local storage from the developer tools in your browser (the Application tab in devtools will show you your local storage). But this isn't very user friendly.
So we need to:
Add a refresh button to each page
The refresh button should a) remove the correct data from localstorage (not all data, just the data for that page) and b) force the component to re-render and call the data loader function
When the data loader is called without any data in local storage, it will call up to the API and fetch data down again.
Now your user can control when data should be refreshed.
Later, if you like, you can try to automate this strategy:
Only download data once per day, or once per hour, or something
Only download data if a match has finished since you last downloaded data
If you do either of these things, you should still keep the Refresh button as a fallback strategy for users.
At the moment, your app will fetch data from a server and cache it.
When you refresh the page, data always comes from the local storage.
You can clear your local storage from the developer tools in your browser (the Application tab in devtools will show you your local storage). But this isn't very user friendly.
So we need to:
When the data loader is called without any data in local storage, it will call up to the API and fetch data down again.
Now your user can control when data should be refreshed.
Later, if you like, you can try to automate this strategy:
If you do either of these things, you should still keep the Refresh button as a fallback strategy for users.