Redux-toolkit: proper way of lazy state initialization

[denu5]

I dont like to open issues which should rather be on stackoverflow, but after a lot of googling I'm not finding any help 😭

To quickly explain what I would like to achieve:

In my app there is a list of products which is stored in a slice. This list can be viewed in different pages/components. But loading the data initially (after a login) is not necessary because maybe the user will never go on a page with those products. So the idea is to dispatch a "initial loading action" within the components that would need that data, but only once...

What I'm looking for is a redux-toolkit preferred way for probably something like "dispatch-fetch-thunk-if-state-not-loaded", currently I solved this with the asyncthunk condition property, which reading the docs seems a valid way: "A method to control whether the asyncThunk should be execute". But I was wondering if this is the proper way.

thanks for any help, maybe someone can share how they solve this, which I guess is quite common

https://redux-toolkit.js.org/usage/usage-guide#asynchronous-logic-and-data-fetching

[markerikson]

FWIW, there isn't anything RTK-specific about this concept - you'd do the same thing conceptually regardless of whether you're using RTK or the plain Redux core.

Yeah, one valid approach is always dispatching a "load some data" thunk, but having the thunk check whether the data is cached or already being requested.

[denu5]

hi mark, thanks for the quick response! and would you tend to solve this with the asyncThunk condition or would this be abusive?

[markerikson]

That's actually the entire reason why the condition option exists :) to give you a chance to say "eh, I have this data already, I don't need to make a request here".

[denu5]

okey perfect, then i continue doing what i do, thanks!