Why should you be using Redux with Angular?

AngularJS Front-end development Tips & Tools

Why should you be using Redux with Angular?

Quick introduction: how to implement Redux into an Angular App

 

Redux is one of the coolest technologies in the Front End development world today. Nevertheless, many people have no clue how to incorporate it into their applications or even why they should. In the first place this post is a simple introduction to Redux. Also, we want to share how it can be added to an Angular application. Additionally, we will give some real examples of how Redux can be used to help you understand the value of this savvy technology in a simple and practical way!

Redux: one of the hottest libraries for Front End

In the case you’ve never heard of Redux, you may be wondering what exactly it is and why you should use it. Redux is one the hottest libraries for Front End out there. Therefore, it is gaining more and more traction from developers in the industry every day, and transforming the way applications are built. At the same time, it enables a new way to conceive applications by using an unidirectional dataflow. As a result, this gives you better control over your application state and tools to eradicate issues associated to data mutability.

According to the Redux official documentation, it is “a predictable state container for javascript apps.” In fact, it is an incredibly lightweight (2kB including dependencies) implementation of Flux.

 

What is Flux?

Well, Flux is a data flow architecture created by Facebook back in 2014. Although it was meant to be used by ReactJS applications, it’s actually technology agnostic. Back then, the main purpose was to replace the bidirectional data flow that traditional architectures like MVC encourage for an unidirectional one. If you have ever been in a chaotic apocalyptic program, trying to figure out which view is updating a particular model using getters and setters, then you can probably understand why having an unidirectional dataflow is both convenient and beneficial.

In Flux, a dispatcher sends actions to stores and updates views in an unidirectional data flow. Therefore, it makes debugging easier and drastically reduces the probability of introducing bugs caused by cascading data changes.

Indeed Redux implements Flux concepts, but also has some differences:

  • Single source of truth, meaning the entire application state will be held in one and one place only
  • The immutability of data
  • There are no dispatcher

 

Redux and Flux

Moreover, you can think of a Redux’s store as a tree, where you can’t change a node because data is immutable. Keep in mind that Redux doesn’t provides any mechanisms to ensure the immutability of data itself. But it is very important to keep your store immutable so tools like “Redux Devtools” can work properly, for that you will need to use some es6 constructors, or include a library as immutablejs. 

So you’ll need to create a copy of the last node and perform your changes there. By doing this, you can always know the different states your application has been through and implementing features like time travelling becomes a breeze. This approach also favors debugging and testing, since you can isolate actions and debug/test them separately. In addition, the immutability of data enables the use of an invaluable tool called Redux Devtools, which provides time travelling, debugging functionality and other great features to accurately observe the state of your applications.

Notably, Redux cycle is really simple, as expressed in the following diagram:

redux

The state of the application is kept in a data store, which provides information to be rendered by views. So when a view triggers an action, this action is processed by a reducer. As a consequence, this generates a new state that updates the application state. For this reason views observing the store are notified of the change and are updated accordingly.

So Redux is simply based on: Actions, Reducers and a Store. Let’s go a bit deeper into each.

 

Actions

Actions are payloads of information, that send data to the store. They are the store’s only source of truth. Also, they have a type. Redux only enforces the “type” property, the structure of the action can be whatever that works for you and your application.

To make the process of dispatching actions easier, some special functions called “Action Creators” are commonly used. Actions creators are exactly as they sound: functions that create actions.

 

Reducers

As actions only describe that “something” happened, reducers are the ones to specify how the application state changes in response to those actions.

Actually, Reducers are pure functions, meaning they cannot modify input data or be altered by any external state like databases, document object model events, global constants, etc.
They have the following signature:

In effect, the reducer receives the current state and an action to perform, and using the action’s payload it generates a new state, that updates the application’s state.

Also, a reducer is commonly handled with a switch statement, to act according to the received action:

In short, it is important to provide an implementation for the default scenario, in case an incorrect action is passed. The most important thing to take into account here is that the provided state can not be mutated. In order to ensure that, some people prefer to use some persistent data structures, provided by libraries like ImmutableJs. However, these are often verbose. So it is easier to achieve the goal by using some constructors provided by ecmascript 6 such as Object.assign() and spread operators.

 

Store

Last but not least, there’s the store. The store is the one that brings actions and reducers together. That means it:

  • holds the application state;
  • allows it to access that info through the getState() function;
  • allows the state to update with the dispatch() method;
  • registers listeners with the subscribe (listener) function
  • unregisters them as well, using the object returned by the register function.

 

Let’s practice: integrating Redux to an angular application

As said before, Redux can be used with any javascript technology. So, enough talking! In summary you will see how to integrate it into an Angular project.

To begin with you can install the Redux library directly into your application. However, it might be useful to install a custom implementation for Angular which will give you access to some angular features like Dependency Injection and Observables. Therefore, there are some good implementations out there such as @ngrx/store and @angular-redux/store.

Let’s choose @ngrx/store since it seems more active on GitHub.

Once you set a basic angular application, install @ngrx/store with yarn or npm if you prefer:

Define the application state models:

Then, generate the calculator’s action creators:

In time add the reducer:

Then, import the Store Module into our app’s main module:

Finally inject the “Store” service into our components and modules and request data from the state using the “store.select.”:

Definitely, that’s all that is needed to set up Redux in a sample Angular application.

 

In Conclusion

Hence, this post is a very simple introduction to Redux and how you can use it with Angular. There are some important concepts to consider, such as dealing with async behaviours, an area where Redux fails to deliver a solution. But some libraries will need to be installed such as @ngrx/effects or redux-observable to get the job done. Additionally, some libraries to consider are redux-store and redux-devtools. For a more extensive list of helpful resources for Redux to deal with forms and many other scenarios, check out the awesome-redux page.

Also, if you want to know more about our coding practices and experience, take a look at our GitHub page!

 

References

Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn
Danier Estevez

Danier Estevez

Danier is a full-stack developer with over six years of experience. He knows that dynamism and proactivity are the top attributes a developer must have. He's always looking forward to learn something new in each project, and work with cutting-edge technologies.

Thanks for signing up!

Stay Connected

Receive great content about building successful products!