Skip to content
🔭 React's State Manager for Reactive Apps in a Centralized and Predictable container.
JavaScript TypeScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.gitignore
LICENSE
README.md
package.json
tsconfig.json
yarn.lock

README.md

Observable state

React's State Manager for Reactive Apps in a Centralized and Predictable container.

Using Flutter? Check out!

But this time

  • 🧰 State changes are handled using encapsulation on plain-old objects.
  • ✔️ You can freely test your state and its changes, like pure JavaScript/TypeScript; because IT IS pure JavaScript/TypeScript.
  • 🎯 Notify only the specific Components that are observing the triggered change, NOT the entire component tree.
  • 💧 No Streams or new Components, it is purely Component and 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.

Get started

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

Installing

TODO

State modeling

TODO

From a simple model like that, to add observable-state super-powers you just need to:

TODO

Then make sure you declare what changes to your state are:

TODO

Even better, remember that changes are handled by encapsulation:

TODO

How to notify about the increment change?

Observable state borrows the same React API for local state (setState()) with a slight difference: the notify argument:

TODO

That is it. Your Observable is notifying about MyState changes.

How to listen to then?

Here comes the withObservableState.

TODO

Note that we are HoC-ing and given it a list of changes it should observe, like Changes.Increment. WithObservableState passes the observable state as props so we can get counter and we can call increment() on it as well. Whenever increment() is called, since it notifies about Changes.Increment, whoever 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: ObservableProvider.

TODO

It's an 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.

You can’t perform that action at this time.