DEV Community

Cover image for Add Redux to your React app in 6 Simple Steps

Add Redux to your React app in 6 Simple Steps

Thisura Thenuka on August 20, 2022

Redux is a predictable state container for JavaScript apps. Do I need to use Redux in my React app? It depends. If your app is simple...
Collapse
 
brense profile image
Rense Bakker

My problem with Redux is not that it's too difficult, it just adds way too much boilerplate to do a simple thing. If you want to make a change, you have to touch 4 different files, often spread all over the project (the state model, the action, the reducer and the selector). Redux does not follow the "keep related things together" principle of clean coding. With Redux Toolkit the overhead is greatly reduced so thats good, however I still wish people would stop for a second and think about what problem they're actually trying to solve with Redux and do a little bit of research on what state management is and what different solutions are out there.

You're right though, Redux appearantly is the de facto standard for state management in React enterprise applications, so using it guarantees some form of "longevity" in the sense that there will probably be people who know how to maintain the code for some time... However the fact that Redux is promoting Redux Toolkit now, which is a pretty big break from the traditional way of Redux is quite revealing and I suspect Redux won't be the industry standard in 10 years, considering the low adoption rate of Redux Toolkit. Other state management solutions will slowly gain more traction as people realize that other state management solutions allow them to develop code much faster and cleaner.

Collapse
 
lexiebkm profile image
Alexander B.K.

"considering the low adoption rate of Redux Toolkit"

Do you mean people are still reluctant to use RTK, despite the benefits we can have from using it ? Probably some people just don't know there is RTK, so they stick to core Redux with its inherent boilerplate.

Collapse
 
brense profile image
Rense Bakker

I think it's both, some dont know it exists and some know it exists, but they refuse to use it because its different from what they're used to.

Collapse
 
thisurathenuka profile image
Thisura Thenuka • Edited

Hi Rense, Thank you so much for joining in for the discussion and providing your valuable input.

My main motivation to learn Redux was that majority of companies have existing projects that works with Redux. So, it would always be a plus point at an interview.

But then again, you're absolutely right ❤️. We need add a lot of boilerplate code to do simplest of things.

Collapse
 
brense profile image
Rense Bakker

True, learning Redux is probably useful for the time being, it's what a lot of companies use and like you said, it can be a plus during interviews.

Collapse
 
lexpeee profile image
Elex

Usually for smaller applications, ContextAPI is way better imo.

Collapse
 
clay profile image
Clay Ferguson

I just removed Redux completely from my app yesterday, and replaced it with what's shown here:

towardsdev.com/stop-using-redux-yo...

TL;DR, React is currently capable of doing what Redux does, so there's no need for the extra dependency, and you can simplify your code by removing redux.

Collapse
 
thisurathenuka profile image
Thisura Thenuka

You're correct. useContext + useReducer provides way less boilerplate code for the same functionality. I'll update the article accordingly. Thank you for the valuable comment ❤️

Collapse
 
danjelo profile image
danjelo • Edited

A bit of caution though when replacing Redux with useContext + useReducer. Performance might suffer a lot depending on the application and re-render scenario.

Anyway great article.
I have found that Redux really shines when updating different components connected to the same state and they are part of a large nested component hierarchy with many unrelated components that should not re-render .
And so powerful if a component itself is connected to a slice of state then it could be arbitrarily moved within the entire component hierarchy.
Also I see Redux as a sort of separation of "what happened" (event) and "how to update any state based on that event".

Thread Thread
 
clay profile image
Clay Ferguson

I'm seeing the UC+UR approach running at east as fast as with Redux. Redux doesn't have anything to do with the rendering efficiency, afaik. All that is done by the core React framework. If anything it seems like this approach is faster.

I have potentially one of the most DOM heavy (1000s of DOM elements per page) apps in the world (quanta.wiki) and it's lightning fast. But I do appreciate the warning.

Thread Thread
 
danjelo profile image
danjelo

I was a bit unclear, you are correct, Redux itself has nothing to do with rendering or react. React-redux has though and is what is passing updates to react in a very optimized manner.
Anyways, I have read a few articles (not trying myself) that Context has performance limitations since any component that consumes context will be forced to re-render and you might need workarounds like useMemo etc.

Thread Thread
 
clay profile image
Clay Ferguson

I don't mind if my render functions get called a lot, because even those have nearly zero impact on performance. What hurts performance is the TRUE DOM modifications when they happen.

So, for example, if I have 1000s of components "consuming context" and I make some global state change that only affects the ACTUAL DOM for one item, then only that one item will consume non-negligible CPU (i.e. DOM update). That's what makes React so fast. It only updates the DOM for things that DID change. So I'm still skeptical about those who say redux is still needed. They may have a bias.

Collapse
 
elibates profile image
Eli Bates

Lately I’ve been preferring Jotai and Zustand over context and redux. The thing I don’t like about context is that you basically are forced to share it with components you don’t want to share it with. Jotai has a cool atom based approach and is worth looking at.

jotai.org/
zustand-demo.pmnd.rs/

Collapse
 
brense profile image
Rense Bakker

Jotai is great, I've been trying to push for it to be used more in enterprise applications, so far no luck though :( but i'll definitely keep trying.

Collapse
 
thisurathenuka profile image
Thisura Thenuka • Edited

Looks interesting. I'll definitely check it out. Thanks for sharing ❤️

Collapse
 
lexiebkm profile image
Alexander B.K.

Although having a good grasp on Redux core is important, the Redux team strongly recommend using Redux Toolkit (RTK) to ease our work in using Redux, as mentioned many times in the official doc. I am still learning, though, but surely I will follow the recommendation, including RTK Query for dealing with data fetching and caching.

Collapse
 
jesusantguerrero profile image
Jesus Guerrero

Good write up, thanks for sharing.
Redux might seen intimidating at first or just too much for a data store but as a data time machine is a great tool to get was going on in a big project.

Also in RTK we can use create slice and they return the actions and reducer.

Collapse
 
thisurathenuka profile image
Thisura Thenuka

Hey Matt,

Well tbh, I didn't know about Redux Tool kit's full functionality when I was writing the article. I was initially going for the old-fashioned redux style. When I was configuring the store, the createStore() method was shown as deprecated and hence I used the recommended imports(RTK).

I'm still trying to learn these concepts. I'll definitely update the article accordingly when I get a hang of the RTK. Sorry for the inconvenience, if there was any.

Collapse
 
zeeshanali0704 profile image
ZeeshanAli-0704

At times we need to configure store for production env & at times for dev env - how to do that!

Use case: Like i want to see my dev tools only for development environment & not production env

Collapse
 
thisurathenuka profile image
Thisura Thenuka • Edited

Hi Zeeshan,

I haven't actually done it myself. I'll share my experience when I do. But for the time being, I believe the following links would definitely help you out

stackoverflow.com/questions/609094...
medium.com/@zalmoxis/using-redux-d...

Collapse
 
zeeshanali0704 profile image
ZeeshanAli-0704

Thanks!