React Spear
A new design pattern for managing states in react.
Installation
Simply run:
# If you use npm: npm install react-spear # Or if you use Yarn: yarn add react-spear
Api
Subject
- A Subject is a subscribable object that holds a value.
SessionSubject
- A Subject that sync with session storage.
LocalSubject
- A Subject that sync with local storage.
useSensable
- A react hook that subscribes to some Subject and gives you back its value and changes it(via state update) when getting a new value.
Usage example
You can take a look at demo folder.
If you have a counter like this:
src/Counter.(jsx/tsx)
;;;; ;
That takes an Up and Down buttons compnent that needs to share their state. You will have a store like this:
src/store.(js/ts)
; ;
The Down and Up components should look like this:
src/Up.(jsx/tsx)
;;; ;
src/Down.(jsx/tsx)
;;; ;
And the Display component will look loke this:
src/Display.(jsx/tsx)
;;; ;
Explanation
-
When creating the store you are creating a subscribable object that can listen to changes.
-
When using the broadcast method(you can help me think other names if you don't like this one), you emit the next value of the state, actualy like setState but globally.
-
Then with the useSensable hook you are sensing the changes from the store(listening to broadcast event of that specific subject). Inside it uses useState to manage the update of the incoming new value, and useEffect to manage subscription to that value.
-
So everytime you broadcast a new value every component that consume that value via useSensable are getting rerendered with the new value.
Hope it make sense because it does to me.
Contribution
I would sincerely appreciate any suggestion pull/merge requests and just to hear your thoughts