Redux & RxJS, any similarities?

Question

I know that Redux is the best “implementation” of Flux, or is it better to say that it is a redesign to simplify things (managing application state).

I heard a lot about reactive programming (RxJS), but I have not yet learned how to learn it.

So my question is: is there any intersection (something in common) between these two technologies or are they complementary to each other? ... or completely different?

Answer 1

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

Redux is a state management tool throughout the application. It is commonly used as an architecture for user interfaces. Think of it as an alternative (half) to Angular.

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

---

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

Here is an example of a change from a distance:

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

Model changed from the controller.

Here is an example of what is observed from a distance:

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

In Logger, we observe data changes that occur in the store (at a distance) and are written to the console.

---

Redux uses the reactive paradigm a bit: the store is responsive. You do not set its content from a distance. This is 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 their data from a distance.

RxJS also uses a reactive paradigm, but instead of being an architecture, it gives you the basic building blocks of Observables to execute this “observation from a distance” pattern.

In conclusion, very different things for different purposes, but share some ideas.

Answer 2

They are very different things.

RxJS can be used for interactive programming and is a very thorough library with over 250 operators.

And Redux, as described in the github repo, "Redux is a predictable state container for JavaScript applications."

Redux is just a tool for managing state in applications. But in comparison, you could create a full-fledged application only in RxJS.

Hope this helps :)

Answer 3

You can "implement" Redux on a single RxJS line . If you think about Rx for other reasons (for the promises skin to use it on the server and client), skip Redux and go through all of Rx.

Answer 4

I just wanted to add some pragmatic differences from when I made the RxJS code with Redux support.

I have mapped each type of action to a Subject instance. Each state component has an object, which is then mapped to a reducer function. All reduction threads are merged with merge , and then scan displays the state. The default value is set to startWith immediately before scan . I used publishReplay(1) for states, but I could later remove it.

The real pure rendering function will consist only in the place where you create event data by sending it to all manufacturers / entities.

If you have child components, you need to describe how these states are combined into yours. combineLatest could be a good starting point for this.

Noticeable differences in implementation:

• There is no middleware, only rxjs operators. I think this is the greatest strength and weakness. You can still take concepts, but it's hard for me to get help from sister communities like redux and cycle.js, as this is another specialized solution. That is why I need to write “I” instead of “we” in this text.

• No switches / lines or lines for action types. You have a more dynamic way of separating actions.

• rxjs can be used as a tool elsewhere and is not contained in state management.

• Fewer manufacturers than action types (?). I'm not sure about this, but you can have many reactions in parent components that listen on child components. This means less imperative code and less complexity.

• You have a solution. No framework is required. Good and bad. In any case, you will end up writing your own framework.

• These are much more fractals, and you can easily subscribe to changes from a subtree or to several parts of the application state tree.

  • Guess how easy it is to make epics, how to make reductions? Very simple.

I also work on much greater benefits when child components are described as threads. This means that we don’t need to make up the parent and child states in the reducers, since we can simply ("simply") recursively combine states based on the structure of the components.

I also think about skipping the reaction and going with a trap or something else until React handles the reactive states better. Why should we build our state up in order to break it again through props? Therefore, I will try to make version 2 of this template using Snabbdom.

Here's a more advanced but small snippet in which the state.ts file creates a state stream. This is the state of the ajax form component that receives the fields (inputs) object with validation rules and css styles. In this file, we simply use field names (object keys) to combine all child states into a form state.

 export default function create({ Observable, ajaxInputs }) { const fieldStreams = Object.keys(ajaxInputs) .map(function onMap(fieldName) { return ajaxInputs[fieldName].state.stream .map(function onMap(stateData) { return {stateData, fieldName} }) }) const stateStream = Observable.combineLatest(...fieldStreams) .map(function onMap(fieldStreamDataArray) { return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) { acc[fieldStreamData.fieldName] = fieldStreamData.stateData return acc }, {}) }) return { stream: stateStream } } 

While the code may not say much in isolation, it shows how you can build state up and how easy it is to create dynamic events. The price to pay is what you need to understand a different code style. And I like to pay this price.

Answer 5

In short:

Redux: Flux-inspired library used for public administration .

RxJS: This is another Javascript library based on the philosophy of reactive programming used to work with "streams" (Observables, etc.) [Read about Reactive Programming to understand the concepts of Stream].

Answer 6

Redux is just a state management library that has well-defined standards for update operations. If you adhere to standards, you can maintain the flow of data in your right mind and reason easily. It also provides an opportunity to improve data flow with middleware and storage enhancements.

RxJS is a reactive programming toolkit. You can think of every thing happening in your application as a thread. RxJS provides a very rich set of tools for managing these flows.

Where does RxJS and Redux intercept? In the prefix, you update your state using actions, and, obviously, these actions can be considered as threads. Using middleware such as observable during redux (you don't need to), you can implement your so-called "business logic" in a reactive way. Another thing is that you can create an observable from your set-top box store, which can sometimes be easier than using an enhancer.