DEV Community

Just Redux: The Complete Guide

Sanjeev Sharma on September 23, 2021

Cover image by Josh Weirick on Unsplash. Hey! 👋 If you're a Front-end developer or aspiring to become one, I am sure you might have come across R...

Read full post

Mark Erikson • Sep 23 '21

Hi, I'm a Redux maintainer. The good news is this post does a good job of covering some of the basics of Redux. However, "modern Redux" is very different from what's shown in this tutorial. Today we teach using our official Redux Toolkit package to write your Redux logic. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once. Unfortunately, most tutorials online are out of date and show practices that result in a lot of extra code being written.

For details on using Redux Toolkit (and the React-Redux hooks API), see our official Redux docs pages:

Sanjeev Sharma • Sep 23 '21

Hey Mark!
Yes, I am aware of it. I will write a detailed explanation on Redux toolkit as well. Infact. that's what I use for my side projects now a days. :)

The intention of this post was to help people know that a lot of stuff is not that hard. And some jobs like mine still use the old way, so it will help.

This article is more for me than others, actually. By writing I can remember concepts, which might be helpful in some other areas. Also, reading and exploring satisfies my hunger to learn more.

Apart from this, I deep dived into Redux after interacting with you on Reddit. We had a short chat about ContextAPI vs Redux. :)

Mark Erikson • Sep 23 '21

Gotcha :) This is a well-written article, btw - just want to make sure others are aware that RTK exists since the article didn't mention it

Sanjeev Sharma • Sep 23 '21

Fair point! Added a link to the Redux toolkit in the end.

NikosSp • Sep 24 '21

I have to admit redux toolkit is amazing, as it adresses redux's biggest problem : BOILERPLATE

But, in my opinion, it would be very useful for someone to work on redux before toolkit, in order to better understand the underlying technology.

This way she/he will appreciate redux toolkit's offerings even more!

Emmanouil Liakos • Oct 28 '21 • Edited

Totally agree on this! When I first started to learn Redux, I decided to begin a series on this having exactly that in mind: Looking under the hood before using any abstractions.

For anyone interested it's here: Real-time app using React, Redux, Tailwind CSS & Firebase - Part 1

Sanjeev Sharma • Sep 24 '21 • Edited

Yes! Totally in favour of this.

RTK would be appreciated more if people know about old way doing things in Redux.

Mark Erikson • Sep 25 '21

FWIW, that's why we have two different tutorials in our docs:

"Essentials": jumps straight into RTK as the default Redux syntax, for people who just want to know "how to use Redux the right way" without worrying about how it works inside
"Fundamentals": teaches how Redux works from the ground up, so that you understand all the principles and mechanics first

Raí B. Toffoletto • Sep 24 '21

I want to take the opportunity to thank you guys for the toolkit!! I love using it with react. Cheers to you all!!

Kingkor Roy Tirtho • Sep 25 '21

Here's the zustand version of the counter

import create from "zustand";

const counterStore = (set, get)=>{
  return {
     value: 0,
    increment(){
      set(({value})=>({value: value+1}))
    }
    decrement(){
      set(({value})=>({value: value-1}))
    }
  }
}

export const useCounterStore = create(counterStore);



// inside a component access the state as follows
const CounterComponent = ()=>{
  const value = useCounterStore(s=>s.value)
  const increment = useCounterStore(s=>s.increment)
  const decrement = useCounterStore(s=>s.decrement)

  return (/*...React JSX*/)
}

Why go hard on yourself when life can be so easy!

Lenz Weber • Oct 16 '21

About the same amount of code as modern Redux. This article just shows the internals, not how it is really used nowadays. For modern Redux, I'd recommend
redux.js.org/tutorials/essentials/...

Raí B. Toffoletto • Sep 24 '21

Nice and complete cover of pure redux!! 🎉 Congrats.
I think it's essential to understand this way of using redux before going to use the toolkit, it lets you understand better what the toolkit will do (and lets you create a deep appreciation for how it makes things simple 😁😁).

Btw, i just didn't understand your statement of ""I found that 80-90% of the things we do in Redux is just plain JS.""... it is 100% pure JS in this form. You can implement it anywhere.😉

Sanjeev Sharma • Sep 24 '21

Agreed! 🙌 and I'm glad you liked it.

Haha! yeah. It's all JS anyway. 😁

yukoliesh • Sep 25 '21

Thanks for this article. It makes easier to understand what the redux is about. I tried Redux 3 or 4 years ago and it was a horrible experience. I was super new to React/Redux and JavaScript and I had to deal with A LOT of boilerplates. I was pretty much traumatized by it. But after gaining more experiences with React and JS and with the latest Redux, I think I can try again. It makes more sense now.

Sanjeev Sharma • Sep 26 '21

Wow! Feels good to hear that.

I'm glad I could help. 😇

Zohaib Ashraf • Sep 24 '21

Thankyou loved this article
I do suggest please add another article that discuss redux toolkit basics like this article did

Sanjeev Sharma • Sep 24 '21

Glad you liked it!

Yes, for sure, I'll try to add it soon. :)

Freddy Colombo • Sep 27 '21

Hola Sanjeev!
Están bastante didácticas las explicaciones de esta guía.
Se entiende y se sigue sin dificultad.
He leído muchos Tutoriales de Redux y este es el más entendible.
Muchas gracias.
Saludos.
PD: Quedo atento a tu POST sobre React Toolkit.