Zustland Multiple stores
hey when using something like zustand, how would i use a store inside another store?
for example i have
metaDataStore which contains metadata, that i want to use in my readerStore
metadata is getting used in a callback in the readerStore. The readerStore contains an event callback for onRead()
so i cant really pass it into the function22 Replies
I've looked at slices, but they dont really solve the issue, as o still need the values from 1 store in anotehr
I think your architecting something wrong, if you need both stores then why not combine them into one store?
Because its used in more than 1 location.
so one of them is my dbContext store for example
dbContext?
You have a db connection on the frontend? I don’t get it, that doesn’t sound like a good idea
So then both locations depend on that one store
its a react native app
its a local sqlite file
yea
so the way i have it is i have
dbStore
metaDataStore
readerStore
reader interacts with custom hardware
dbstore is for the db context,
and meta data is data which is from the database (not my naming, they had these names before i jumped in, but i should rename them)Ah can you just duplicate the data into the db store as a quick fix
And then maybe see if it needs to be in meta data
Having a store within a store seems wrong to me
Right now to access dbContext inside of
readerStore i do dbStore.GetState().contextI wonder if this is also a case of storing too many things within the store
i dont believe so
the readerStore contains the logic for the native module
Zustand has a
.getState method on the store hook you can use to get the state outside of componentsYea that’s what I’m using atm
But is doing that a sign of bad architecture?
@WOLFLEADER yeah so u can use that to access a store from another store
Probably depends on the circumstance
Does sound like it would be hard to follow though
The issue I have is the previous app was designed in a way that everything was basically global state in the app component and passed down through resct contexts
But that was causing performance hits. I’m coming in and trying to fix that
But I might need to sit down and really think about the architecture here
To me it makes sense to keep the native module singleton in a store.
But maybe I should extract the logic thst interacts with the database out of it
It’s also annoying as the native module has events I need to listen too in the app. So right now I listen to them in the store, then update a value to cause a useEffect to run so that you know it’s been called
if it’s just a bunch of contexts that are causing rendering issues then simply converting everything to zustand and using selectors would probably make the performance good, it’s pretty low effort compared to restructuring everything.
Could start with the conversion to zustand then think about redesigning things afterwards once it’s working and the perf is fixed.
Native module as in react native native module?
Yea react native modules
And yep that’s what I’ve done. Just moved them all into their own zustand stores
But then ye some of them require the others
yeah sounds kind of like a shit show haha did it fix the performance?
Haha haven’t been able to test yet as it’s a shit show lmao
I’ll be testing it today
The people who made theee changes to the app aren’t react devs lmao
And I know that because some of the state was stored in app and passed down as props lmao
dannggg haha a non react dev ends up with rendering performance issues
A tale as old as time
Yep 😂😂
seem to have fixed it 🤣
@WOLFLEADER NICEEE. probably was just like rerendering the entire app constantly with the contexts lol
Yea lol
I think eventuaklly I’ll fix up the architecture too haha