Edition 11

Good Practices
REACT-REDUX: Why it’s Good for us?

Copyright Notice

This document contains proprietary information of HCL Technologies Ltd. No part of this document may
be reproduced, stored, copied, or transmitted in any form or by means of electronic, mechanical,
photocopying or otherwise, without the express consent of HCL Technologies. This document is intended
for internal circulation only and not meant for external distribution.

HCLT Confidential
 Edition 11

React- Redux
Ankita Raj, Ankita-ra@hcl.com

Introduction
React is a JavaScript library used for building single page application. In React, we simply
update a Component’s state and then render a new UI based on the new state. React takes care of
updating the DOM for us in the most efficient way. But, State is very hard to deal with in all
applications. In complex/large react-web apps it feels even more difficult to manage. Thus,
Redux is an ideal framework and a best combination to be used with react for state management.
The main concept behind Redux is that the entire state of an application is stored in one central
location.

Abbreviations
Abbreviations Expansions

DOM Document Object Modal

SSR Server Side Rendering
MVC Model-View-Controller

Problem Faced
Managing the communication between Parent and Child component in complex/large React
applications is very difficult. Having two components that share the same data can make it messy
when we want our data in “in sync”. Consider a scenario in which there are two child
components who need access to the same data, React does encourage us to "lift state up", which
means putting the data in the nearest ancestor of the two components. So, the ancestor would
have to pass the data down as ‘props’, through several other intermediate components along the
way. Thus, Passing ‘props’ in this manner can become confusing to trace. It also makes it harder
to move components around because there is a coupling between: -
1)The Component and its Parent
2)The Component's children that it's passing props to
Thus, it also could be a performance issue, since every update to the data would cause all the
children to re-render.
Just as illustrated in the following chart:-

HCLT Confidential P age |1

 Edition 11

As seen in the image, any given view could affect any model, and vice versa. The problem
with this is when there are many views and models and one of the model’s state changed into
something we didn’t expect we are unable to efficiently trace which view or which model
caused the problem.

Solution Approach/ Remedial Action

To overcome the above issues; we decided to move with ‘React-Redux’ as it’s not only the
latest technology, it has many advantages over React.
1)Redux helps us in these tricky scenarios where multiple components want to share some or all
of the same data, but are not closely related to one another. Redux provides a central store that
can hold data from anywhere in the application. In Redux, a ‘store’ is just an object with few
methods on it. Redux also allows individual components to be "connected" to the store, and
extract just the pieces of data that we need. So, the data no longer has to be passed down through
multiple levels of components. This can make the code simpler, and since fewer components are
involved, it can also improve rendering performance.
2) Using Redux, we can achieve one-way or unidirectional data flow which makes the logic of
our app more predictable and easy to understand. It also encourages data normalization, so that
we don't end up with multiple, independent copies of the same data that are unaware of one
another.
3) When Redux is coupled with hot-reloading, it massively improves the development time.
Basically, Hot Reloading is the ability to reload our code whenever we save a file, without
having to refresh the entire page.
Unfortunately, Hot Reloading of React component wipe out our existing component tree,
including any state stored inside of them. So, the Hot Reload would effectively throw away all
that data and reset our UI back to its original state.
However, when Redux-connected components are reloaded, they will immediately read the
current data from the Redux store, and render that data with the updated code. This gives us the
ability to effectively "live-edit" our UI, and makes the development process much faster.

Benefits
Quantitative Benefits
React has been under fire for being too bloated when combined with all of its typical
dependencies (i.e.React-Router, Redux, etc.) — and therefore risks slower delivery of the UI to

HCLT Confidential P age |2

 Edition 11

the client, we saw a great potential for React-Redux to be helpful when it came to developer
friendliness.
For us, it came down to a few points that won us over: -
1. React uses the concept of Virtual DOM. Whenever a React component is updated, React
updates the DOM for us. Like the actual DOM, the Virtual DOM is a node tree that lists
elements and their attributes and content as objects and properties. React’s render()
method creates a node tree from React components and updates this tree in response to
mutations in the data model, caused by actions. Each time the underlying data changes in
a React app, a new Virtual DOM representation of the user interface is created.

2. React’s API is small and simple, which made it easier to on-board developers and get
them up to speed with the conventions of the framework.

3. The React-Redux community is huge. We rarely need to reinvent the wheel when we’re
looking for new functionality. The community is also pretty set on standards and
conventions. This means we can spend less time choosing tools, making our own
conventions, and debating on tabs-vs-spaces.

4. React-Redux is battle-tested. At least from a business perspective. Large companies use

it in production which mostly means to us that there is going to be active development
and investment in it for a good chunk of the foreseeable future.

5. React-Redux offers (kind of) an out-of-the-box solution to server-side rendering (SSR).

SEO is a major concern for our online presence, therefore a solution which allows us to
deliver fully-rendered HTML was important. Some of our requirements were a bit more
involved and required some creativity (half server-rendered React, half legacy PHP
templates 🙊), but for full React pages, this was easy to set up.

6. But most importantly, React-Redux helps with separation of concerns, state flow among
UI elements and the resulting transitions. Its unidirectional data-flow and reactive nature
allow for a declarative organization of components in a way that’s natural to anyone
who’s worked with HTML. Combined with the typical Flux architecture, it allows for
complete separation between the application’s UI and its data.

7. It allows to build loosely coupled components and render only those action which has got
their data changed causing high performance quite effective for data centric UIs.

HCLT Confidential P age |3

 Edition 11

Qualitative Benefits
Redux is compatible with many other React-like frameworks such as Preact and Inferno as well
as Angular and even just plain JavaScript. It benefits us by:

1. Predictable state updates: - Make it easier to understand how the data flow
works in the application.

2. The use of "pure" reducer functions makes logic easier to test, and enables useful
features like "time-travel debugging".
3. Centralizing the state makes it easier to implement things like logging changes to
the data, or persisting data between page refreshes.

4. Using Redux, we can develop highly performance efficient application as it allows

React components to re-render themselves, based on state data update. The only
component gets changed and re-rendered of which associated data is being changed
on state level.
Thus, Redux helps in improving rendering performance as the data no longer has to
be passed down through multiple levels of components. This can make the code
simpler, and since fewer components are involved, it improves rendering
performance.

Learning/ Improvements
What always makes me happy with new technologies are hidden positive side-effects I’ve never
expected to happen. When I started exploring ‘React-Redux’ I never expected it’ll become so
popular in our team. React allowed us to re-think our frontend architecture and make us a lot
more productive. We learnt “how to split the UI into components?”, “how to pass the data to a
component in sane way”. There was less time to make all this write code-refresh browser-fix
error cycles we had before. Declarativeness of React allowed us to think about code easier and
took all nasty corner-cases of handling user interactions and changing page away. We replaced
advice approach with event buses as a first step. As the project grew, we needed to overcome
performance problems - we loaded the same data many times from different API endpoints. So,
it was not only React that fixed our problems. As the project grew, managing state was really
difficult. The Model-View-Controller (MVC) describes a separation between the data (model),
the presentation (view) and the application logic (controller). This ensures that our application is
built in a structured way and that we achieve a separation of concerns.
However, the disadvantage was that we were losing control of our data flow. In general, the data
flow was bi-directional. The user input in one component can affect other components and vice

HCLT Confidential P age |4

 Edition 11

versa. Controlling the flow of data and making sure that all user interface components update
accordingly was an error-prone task.
By using Redux we’re solving this problem by introducing a central data store in our application.
The store contains the state of the application and is the source of truth for components. By using
the store concept, we do not need to synchronize state between components manually. Instead we
can fully rely on the Redux store at any time.
Redux has three main parts: Actions, Reducers and Store.
Actions: Actions are just like the user actions, which a user does on the UI screen is being
captured as an event and passed as an action that consists of action type and payload.
Actions are JavaScript objects as you can see in the following example:

Here the action object has two properties:

 type: a constant to identify the type of action

 payload: the updated data that is passed to an action and which is supposed to update the
Store accordingly.
Action objects are created by using functions. These functions are called action creators:

Here you can see that the only purpose of an action creator function is to return the action object
as described. Calling actions in the application is easy by using the dispatch method:

Reducers: Reducers are the most important building block and it’s important to understand the
concept. Reducers are pure JavaScript functions that take the current application state and an
action object and return a new application state:-

HCLT Confidential P age |5

 Edition 11

The important thing to notice here is that the state is not changed directly. Instead a new state
object (based on the old state) is created and the update is done to the new state.
Store: The store is the central objects that holds the state with application data . The store is
created by using the createStore method from the Redux library:

We need to pass in the reducer function as a parameter. Now you’re ready to dispatch an action to
the store which is handled by the reducer:

This is how React-Redux works together and thus helps in improving the maintainability,
consistency, scalability and reusability.
I also learnt testing of all JavaScript code including React applications using JEST framework.
Jest is a JavaScript testing solution framework authored by Facebook. So, I configured Jest
framework successfully in our React application and wrote the test cases to test application. And
it helped in more stable and healthy code bases.
So, React-Redux is the best front-end technology to create any web-application and to test the
React applications, Jest framework is the most suitable as React and Jest both are authored by
Facebook. So, both are compatible with each other.
Thus, it’s a good idea to get started with this new technology as it’s the hotness these days.
But, there are lot many possibilities in React like Lodash which has their own pre-defined in-
built function so we don’t need to write function anymore. We can simply install the lodash in

HCLT Confidential P age |6

 Edition 11

our application and import the functions which we need like Addition (), Subtraction () etc. in
our component. And the other big thing is that newest version of ECMAScript i.e. ‘es7’ has been
released and it’s packed with new features. So, these things are in my bucket list to find more on
it.

Applicability to Other Projects

Just because a framework is currently popular, fun to work with, or used by Facebook doesn’t
necessarily make for a bullet-proof justification to the higher-ups why it’s the best choice for our
next project.
They’re usually concerned with “business justification” as Businesses don’t like risk. Every
business wants: -
1. Speed of Development: Project should be done on Time and within Budget.

2. Ease of Maintenance: How easy (read: fast and cheap) will it be to maintain the project?
From a business point of view, this means adding new features and changing existing
functionality without burning a ton of time on expensive developers and things that go along
with developers – like project managers, QA people, etc.
3. Long-Term Usefulness: Businesses look at software as an investment. They do not want to
spend 8 weeks on 3 developers to build a thing that the next developer will suggest rewriting
from scratch (for another 8 weeks).
4. Low-Risk: Risk can take many forms like:
 The project might never be completed.
 The project is completed but nobody is willing or able to work on it.
 It costs way more than expected (time or money or both).
 The license scares away acquiring companies, customers, etc.
 Open source can be scary or misunderstood (e.g., fear that using GPL-licensed
code would cause company code to become open source) etc.
Businesses want to mitigate these things as much as possible.
Keeping all the above mentioned things in our mind, we chose React combined with Redux as it has
the ability to fulfill all the above requirement.
React-Redux has helped us solve a myriad of problems and make awesome interfaces. We've
been using it for about 8 months across many of our applications and can't keep quiet about it
any longer: We love it! Here's a list of reasons how it has helped us immensely.

 React’s component-based nature means that it’s quick and easy to translate
designs into code, and that it’s easy to reuse components across the app to save
time.
 React-Redux borrows ideas from functional programming which make the code
simple to refactor. This means change is relatively cheap (compared to duct-tape-
and-glue options like jQuery).

HCLT Confidential P age |7

 Edition 11

 React- Redux is very popular right now, but it’s also been quite popular since
around 2014. That’s around 3 years, which is an eternity in the JavaScript world.
React-Redux has sticking power.
 Even if a competing framework takes the throne in the coming years, the long-
standing popularity of React-Redux means there will be a strong pool of React –
Redux developers to carry the project forward.
 React-Redux has been used in production by large companies like Facebook,
Netflix, Airbnb, Walmart, PayPal, and many more.
 The React-Redux community is large and supportive. Most problems have
already been encountered and solved. There is a vast array of existing custom
components to choose from.
 React-Redux has been relicensed under the MIT License, which (a) means there
is no longer a patent-related threat from Facebook and (b) it’s not GPL, so there’s
no risk of “infection” (perceived or otherwise).

Thus, React-Redux is a valid choice for any project. We changed front-end of many web
applications into React-Redux which enhanced the rendering performance of the application,
maintained performance as the no of requests/users increases.

References
https://reactjs.org/

https://github.com/facebook/react

https://github.com/mschwarzmueller/reactjs-basics

https://redux.js.org/

https://www.codementor.io/mz026/getting-started-with-react-redux-an-intro-8r6kurcxf

Appreciations received for the Good Practice

Words from:

Krishna Prasad, HCL:

“Identifying the problem, understanding the root cause and finding the right
solution to realize the benefits. Perfect example of a good practice. Well Done!”

HCLT Confidential P age |8