Joining Apptension, a software development company, I was a junior frontend developer. I had some initial experience with React, so one of my first projects was based on this library. In this post I will explain how to use Redux to make them even easier.It is becoming, actually, one of the most commonly used libraries, according to Stack Overflow Survey 2017. In the category of frameworks, libraries, and other technologies, it is now the fourth one, after Node.js, AngularJS, and .NET Core.
Source: Stack Overflow
React is great for simple projects
Use Flux or Redux for more complex implementations
To avoid situations like the one described above, it is best to use the Flux architecture. It makes React components much more independent from each other.One of the most popular implementations of this structure is Redux.We’ve decided to use it in our next project that was also based on React. It helped us with assuring the proper data flow, and we were able to avoid many problems with transmitting data to the particular components.As you can see, Redux can improve developing projects based on React, making them much more flexible to future changes.Before I introduce the components of Redux one by one let’s quickly recap the general concept behind React and Flux to see how Redux differs from it.
React, Flux, and Redux: What Are They?
If you are already familiar with how React works, what is Flux and how Redux differs from it, you can easily skip this part and go right to the Redux-oriented part of this article.But if you are still a little bit confused with all of this (I definitely was when I first started exploring these terms), I will explain the basic ideas behind React and Flux:
What is React, and what it isn’t
The concept of Flux
That’s where Flux comes in handy. But again, the concept of Flux may be as confusing as React’s definition. Why? Because Flux is not actually the framework, either:"Flux is more of a pattern than a framework"It is a concept of an architecture, that adds an unidirectional data flow to React’s components:
Source: Facebook’s GitHub
What about Redux?
The four-blocks concept of Redux
Redux can be easily explained with a four-blocks example:
Let’s discuss them one by one:
3. Store and View
As you have already seen, the pictured application’s state (store) is a one big object, modified by the reducer, depending on the type of an action.Unlike the first two elements, store does nothing except – well, you may have guessed it – storing the data.Then the object is uploaded to thea particular views (components) of an application. Depending on the requirements for passing data to the component, only a given values are being passed, not the whole object of application’s state.Next, they are being displayed or processed, in accordance with requirements.
Here's an example of the product we built using Redux.
Simple implementation of unit tests
The process shown in the diagram above is not too complicated, as Redux is a quite simple implementation of Flux.Thanks to its simplicity, it is very easy to learn and implement in many projects that rely on React.What I haven’t mentioned yet, is the ease of testing the Redux elements. Since every big element is divided into smaller modules, there is no problem to write unit tests for them. They are necessary for ensuring a proper implementation of the project, so that we don’t need to check everything manually.Studies, conducted by companies like Microsoft and IBM, shown that writing unit tests leaves up to 15-35% more time for development, reducing the number of bugs by 40-90%.It is a big advantage, and you can easily test an application that uses Redux.
Building websites you need to always assume that the project may need to scale up. That’s why it’s better to use tools and technologies that will let you do it effortlessly, without the need of rewriting the code.For me, switching to using a combo of React and Redux was a good choice.These two libraries helped me with building and testing projects, and I can recommend using them to you as well.