Search code examples
javascriptreactjsreduxrxjs

Can I use RxJS vs Redux/context when trying to manage and access state in different components and handler methods

I know Redux is a better "implementation" of Flux, or better saying it's a redesign to simplify things (application state management).

I have heard a lot about reactive programming (RxJS), but I haven't dived to learn it yet.

So my question is: are there any intersection (anything in common) between this two technologies or they are complementary? ...or totally different?

Redux, along with the Reach context api, is a way to create and manage a state store which can be observed through Redux actions.

RxJS, a reactive programming language, has the ability to set and access state from different components without the overhead of Redux actions and reducers.

For the purpose of managing and accessing state where might Redux be more useful as a state store as opposed to a reactive programming paradigm?

How would you decided to use one vs the other for the purposes of managing and accessing state in various components?

Solution

  • In short, they are very different libraries for very different purposes, but yes there are some vague similarities.

    Redux is a tool for managing state throughout the application. It is usually used as an architecture for UIs. Think of it as an alternative to (half of) Angular.

    RxJS is a reactive programming library. It is usually used as a tool to accomplish asynchronous tasks in JavaScript. Think of it as an alternative to Promises.

    Reactive programming is a paradigm (way of working and thinking) where data changes are observed from a distance. Data is not changed from a distance.

    Here is an example of changed from a distance:

    // In the controller.js file
model.set('name', 'George');

    The Model is changed from the Controller.

    Here is an example of observed from a distance:

    // logger.js
store.subscribe(function (data) {
    console.log(data);
});

    In the Logger, we observe the data changes that happen in Store (from a distance), and write to the console.

    Redux uses the Reactive paradigm just a little bit: the Store is reactive. You do not set its content from a distance. That's why there is no store.set() in Redux. The Store observes actions from a distance, and changes itself. And the Store allows others to observe its data from a distance.

    RxJS also uses the Reactive paradigm, but instead of being an architecture, it gives you basic building blocks, Observables, to accomplish this "observing from a distance" pattern.

    To conclude, very different things for different purposes, but share some ideas.