React's State Manager for Reactive Apps in a Centralized and Predictable container.
But this time
- 🧰 State changes are handled using encapsulation on plain-old objects.
Components that are observing the triggered change, NOT the entire component tree.
💧No Streams or new Components, it is purely
setState(); like Vanilla, but in a Centralized and Predictable state container. Your Container!
How it works
It's a sweet, sweet sugar on top of the battle-tested Observer pattern. Your state is stored in a list of
Observables of a given subject (see
Change below) and it's
setState() is called only when your Model explicit tells to notify about that change.
- It isn't Redux, but you still can control data in an unidirectional flow.
- It isn't MobX, but you still can reason about your whole state and mutations as methods on it.
The fact is: state is hard! Probably the hardest thing (after naming, of course). This is why things like Flux/Redux appears; to help you solve that.
And that is why observable-state is here too.
Talk is cheap. Show me the code — Torvalds, Linus
From a simple model like that, to add observable-state super-powers you just need to:
Then make sure you declare what changes to your state are:
Even better, remember that changes are handled by encapsulation:
How to notify about the
Observable state borrows the same React API for local state (
setState()) with a slight difference: the
That is it. Your
Observable is notifying about
How to listen to then?
Here comes the
Note that we are HoC-ing and given it a list of changes it should observe, like
WithObservableState passes the observable
props so we can get
counter and we can call
increment() on it as well.
increment() is called, since it notifies about
Observer (like a
WithObservableState) is observing this change, it will automatically calls its inner
setState() method, then re-render it.
Where does the
state comes from?
The last piece:
Context.Provider responsible to provide our state from its context.
That is it! You're ready to Rock!
Observable has no dependency at all with any React APIs, so you can unit test your state using plain-old
test packages. And you can test your Components using a mock or a real state without any hassle.
Check out the example directory for a complete example with async-flows, services, dependency injection, integrations and a lot more!
Feel free to, and I'd be glad if you, try it and leave some feedback. Just be aware that while on early stages, API may change.