Professional Documents
Culture Documents
React-Redux GPC 11
React-Redux GPC 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
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:-
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.
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
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.
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.
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.
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
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 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:-
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
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.
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).
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
“Identifying the problem, understanding the root cause and finding the right
solution to realize the benefits. Perfect example of a good practice. Well Done!”