aohua/redux-state-sync

How to disable initial application loading if synced

Closed this issue · 3 comments

Hi,
Great library!

However am stuck on something. My app does an initial load of various pieces of data from the server in a useEffect block and populates this into the redux store.
When I open new tabs, for performance reasons I want this to instead come in synced from the other already open tabs (using this library), in which case the server side load does not need to be made.

The problem I am facing however is the redux state sync happens asynchronously, so if I simply check some loaded property in the store when the components mount, it will be false at this point because the redux state sync happens afterwards. Is there a way to do this somehow?

Thanks

aohua commented

The API call is sending from the client-side? Are they trigging any actions? Could you just blacklist those actions? So it won't make API calls in other tabs.

I think I understand wrongly, it will have to happen asynchronously, coz the new tab is actually asking for the data from existing tabs. But it can be done if you use local storage as the broadcast channel. You can simply check the data in the localStorage in this case.

Hi - yes you understand what I mean now. It's quite an interesting one actually, profiling it more it seems attempting to not do the (potentially unnecessary) rest call might not save much load time at all on the UI, because what actually happens is the UI will render whenever the first of redux-state-sync or the rest api response comes back to populate the state.

I'll probably just leave it like that, as the only benefit is probably just reducing some request load on the server side rather than how fast the UI can render.

Btw the redux-state-sync always comes back first (if there is another tab open), so having this in place should still improve load times 👍

aohua commented

Ok, I will close this issue.