When to use

When to use Reactive state instead of Redux

"Another state container, seriously?" - everyone

Yes, another one. If you ask why you should and when you would use reactive state over traditional redux, this page is for you.

Design philosophy

Let's face it: RxJS has a step learning curve. But like vim or emacs, it is definetely worth investing the time, and it will increase your productivity when dealing with async operations or callback hell in JavaScript/TypeScript. Reactive State was designed to fit with React and RxJS. But instead of a middleware or library that builds on top of redux, reactive-state was created to replace redux (and mobX, reselect, redux-saga/redux-thunk etc.). RxJS is build into its core, instead of glueing RxJS on top of redux (as i.e. Redux-Observable does).

Decision helper

When in doubt, use these criteria:

Use reactive-state if:

• You are familiar with the RxJS framework, or are willing and eager to learn it
• You understand what RxJS can do for you to make your async live easier
• You prefer Observables over Promises and async/await API in your day-to-day code
• You want to scale your application by building a loosely coupled and event-based architecture, designed however you want, with no constraints and strings attached.
• Make full use of the the cloud and async nature of serverless architectures such as AWS, GCP (including Firebase) and the internet as a whole.

Don't use it if:

• You have no Idea what RxJS is and don't want to learn it
• You are happy with your existing react/redux/redux-thunk/reselect stack
• You use RxJS only on occasion

Why reactive-state obsoletes many middlewares

When using reactive-state, you still have to grasp the (excellent) redux concept (I.e. know about store, state, action, reducer). But since you are already using RxJS and are familiar with it, you get most of the benefits with reactive-state where with redux, you would need to learn new libraries, middlewares and confusing project names.

When using reactive-state, RxJS will provide you with everything that is provided by these middlewares/libraries in the traditional redux world:

• Selector libraries (reselect, mobX) - Instead you just use .watch() from your store and get an observable that can be mapped, filtered, transformed, joined etc. the same way you already know from RxJS. Changes on the state will immediately be emitted to your observable.
• Action creators: Actions are just Observables, you don't need to learn when and why to use action creators
• Async middlewares such as redux-thunk or redux-saga become superfluous with reactive-state. RxJS is asynchronous by nature. Actions are observables, they are asynchronous by design. A 100% match. You can subscribe to the dispatch of actions by subscribing to the observable, and perform the same transformations mentioned above. There are no additional abstractions added by reactive-state, it's plain RxJS.