More posts by Intelliware Development
If you’re not familiar with Reactive Extensions (Rx), let’s take a quick step back to imperative vs. declarative programming. An imperative program uses specific commands, and focuses on describing how an application operates. A declarative program, in contrast, focuses on what the application should accomplish, without specifying how to achieve that result.
Rx is a set of tools that allows imperative programming languages to operate on sequences of data regardless of whether that data is synchronous or asynchronous. By providing a set of sequence operators that operate on each item in the sequence, it allows for event-based asynchronous programming while eliminating several layers of callbacks.
Libraries like React can help with this problem in the view layer by removing both asynchrony and direct DOM manipulation, but where application data-flow architecture like Redux comes in especially handy is making state mutations predictable by imposing certain restrictions on how and when updates can happen. First introduced around July 2015, Redux became popular quickly due to its simplicity, small size (2 KB) and great documentation. It is completely framework agnostic and, as a bonus for us, works really well with Angular.
The beauty of Redux is that it maintains the state of an entire application in a single, immutable state tree (an object) that can’t be changed directly. When something does change, actions and special functions known as reducers create an entirely new object.
At Intelliware, we’re using a Redux implementation called @ngrx/store on one of our largest projects and, quite frankly, we love it. In terms of componentization, subscribing to events instead of relying on parent-child interactions gives us a valuable extra layer of abstraction, and reduces the dependencies between components. It also simplifies our code and makes our components more flexible and easier to use. Because the parent component is now irrelevant, you can technically use our components anywhere in the page.
Some of the other benefits of Redux include:
- Having a predictable outcome, because the store is always the source of truth. No confusion exists about how to sync the current state with actions and other parts of the application.
- Code that is easier to organize and more consistent, making it easier to maintain.
- Improved server rendering, with the result of a better user experience, enriched search engine optimization, and so on.
- Better developer tools that can track everything going on in the app in real time, from actions to state changes.
- Testing that is easier due to independent functions that are small, pure, and isolated.
Finally, one of the greatest benefits of implementing Redux is its ecosystem. The user community is strong, and they are constantly making unique articles, tutorials, middleware, tools, and boilerplates available. Samples of use cases can be found here , and many authors are becoming known for their ability to use Redux creatively and, equally as important, explain it coherently.
If you want to know more about our use of Redux or what we’re working on next, feel free to contact us.