Guide for more complex usage of stores
Were can i find a more complex guid of how to use SolidJS stores. The example i wanted to do is to have a store of transactions, i will have a component to list all transactions, a component to create a new transaction with a parent page to contain it all. Down in the list component is a child component for each transaction. In the child component i can delete the given transaction, when this is done i would like to send a signal to the store that it needs to re-fetch the list of transactions, same when a new transaction is added. From what i understand from the tutorials i need to have the store i a separate file that gets included. But i can't really figure out what the best practice is here, and how can i have a single place where "fetch" logic is, so i don't have to copy it for the child component and the new transaction component.
19 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Using the context api would be a good idea here
I really did not want to pass down functions. I was hopeing for something like Redux actions and reducers.
Context would work similar. As far I know there isn't something 1-1 with Redux actions and reducers implemented specifically for Solid
Though I believe Redux is agnostic
Oh it dose not need to be exactly like Redux.
Just more a way to have "actions" in a decentralized place
If you implement it through context, you could do something like
transactions.delete()
Where transactions is the context
And that would do the refetching and any other logicHmm
I would have tough this is a common problem. Am i right in assuming everyone just solves this by parsing functions up and down the component tree?
Usually, you just use a context
So you don't have to prop drill the functions
So you wrap the sore and the add, edit and delete functions for a context?
Sorry i am a primary backend developer that dose a bit of front end 🙂 I have never really used contexts
You make a context provider that wraps the part of your app that needs access to the data. The context provider contains the store and the add, edit, and delete functions
I would take a look at the tutorial for context and try to grasp how it works and see if you understand how it solves this issue
Yeah looking at it now
That makes sense
Thank you for the help!
No problem 😄
@._rb do you know if there are any guidelines on how to use async in context function?
What do you mean by guidelines?
example is it best practice to make the function itself async, or should it be sync with a async function inside like is done in React
If I understand what you mean, sync with a async function inside would be the correct approach
In that case how would you handle a loading state while it executes, as that is now hidden inside the context? A loading signal on the context itself?
Most likely. Or if you use a createResource you could possibly just share that resource with the context
Got it, i really appreciateyour help 🙂