Fable.Store icon indicating copy to clipboard operation
Fable.Store copied to clipboard

Ported `useStore` from Fable.LitStore

Open JordanMarr opened this issue 2 years ago • 0 comments

Hi Alfonso!

I have been doing some updates to my (now 4 year-old!) Fable client project, including recently updating to Fable 4. What an enjoyable project it has been! Thank you again for all you have done with Fable.

Anyways, I wanted to refactor my usage of React.useContext to use a full-fledged shared/global Elmish loop, similar to what I can do with Fable.LitStore, but using Fable.ReactStore. (See this discussion on Twitter for more context.)

The closest function I could find in the Fable.ReactStore package was useStoreLazy, but it was problematic in that it would not always refresh changes to the store from one component into another. I finally came to the conclusion that maybe useStoreLazy was meant for a more specific use case than what I needed.

So, I ended up porting my original port of useStore that became Fable.LitStore into Fable.ReactStore. This does exactly what I need and allows me to phase out React.useContext in my application.

(One other thing: I wasn't sure if there is a better way to share a global Elmish loop via the new Fable.React React.useElmish in Fable 4, but I didn't see a way to do it.)

Example

Global/Shared Elmish Loop

image

Sharing context in components

image

JordanMarr avatar Feb 25 '23 17:02 JordanMarr