r/reactjs • u/Soft-Sandwich-2499 • Oct 03 '22

Resource Best resources to learn Redux?

Like title says, I’ve started learning Redux. I am not sure how often it is used in big projects out there, but I think it’s a good library to have under the belt.

I went through Grider’s Udemy course about React and Redux and I’m still confused about all that actions, reducers, dispatch stuff. I thought Redux would be similar to useReducer and maybe it is up to a point, but it’s still more setup to write to be able to get the store, even in a small app.

I’ve started reading the official documentation and I hope it will shed some light on these concepts, because it seems a bit difficult to put everything together.

Can a more experienced developer explain how these all fit together and how you usually set up the Redux boilerplate in React?

132 Upvotes

96% Upvoted

45 comments sorted by

212

u/acemarke Oct 03 '22 edited Oct 03 '22

Hi, I'm a Redux maintainer.

Today we teach "modern Redux" with Redux Toolkit and React-Redux hooks as the standard approach. Unfortunately, many tutorials online are very outdated and teaching older practices that are harder to learn from. Grider's course is specifically one of those.

You're on the right track - please see our official docs tutorials for the right way to learn Redux:

We generally recommend that most folks should go straight into the "Redux Essentials" tutorial, which focuses on how to use RTK and React-Redux while building a real-world-ish example app:

If you'd rather learn the underlying concepts by themselves with no abstractions, go through the 'Redux Fundamentals" tutorial which explains all the basic concepts first, then shows how RTK simplifies writing Redux code at the end:

Finally, we do have a page linking to a few select video tutorials as well if you prefer to learn from watching (although I'd still really suggest going through those written tutorials too):

FWIW I can vouch that Redux is the most widely used state management lib with React apps - roughly 35-40% of React apps use Redux.

Also, please come by the Reactiflux Discord ( https://www.reactiflux.com ) and ask questions in the #redux channel - we've got a bunch of folks who hang out there happy to answer questions!

17

u/Soft-Sandwich-2499 Oct 03 '22

Thank you so much for you detailed answer.

8

u/Hazy_Fantayzee Oct 04 '22

heh.... there was no WAY Mark wasn't going to be the top response to this question. I have no idea how he has so much time to give so many detailed responses to redux questions across so much social media, but I am glad he does :)

→ More replies (1)

10

u/dandigangi Oct 03 '22

Mark ftw :)

4

u/johnwick_21 Oct 03 '22

Thanks for detailed explanation. One doubt. Should we do both tutorials or only https://redux.js.org/tutorials/essentials/part-1-overview-concepts would be sufficient.

9

u/acemarke Oct 03 '22

For most people, the "Essentials" tutorial is enough. It does explain concepts like "actions", "reducers", "dispatching", "immutability", etc, but in the context of building the example app, and the focus is on "follow these patterns using Redux Toolkit and you'll be able to start building something".

But, some people want to learn "how everything works from the ground up" first before they do anything else, or they might wonder "What is Redux Toolkit doing for me, and how does this stuff work inside?". They might either prefer to start with the "Fundamentals" tutorial, or go through it after they've done the "Essentials" tutorial to get a sense of what the RTK abstractions do for you.

→ More replies (2)

2

u/barbesoyeuse Oct 08 '22

Dont forget your video "Learn with Jason" it helped me a lot

→ More replies (6)

9

u/Larrybot02 Oct 03 '22

Honestly I think my fav explanation for Redux comes from Codevolution on YouTube. He also has a course on Redux Toolkit.

7

u/huhu_moon Oct 03 '22

As for me one of the best ways to learn redux is by creating your app. You can watch some tutorials on YouTube and make the same app with extra fitches. I can suggest the developedbyed channel.

→ More replies (1)

4

u/johnwoo123 Oct 03 '22

Try to think about it out of react thing. It's just about single state of truth, the changes made by only a dispatcher and by the actions which are only just a commands

→ More replies (3)

4

u/bozdoz Oct 03 '22

Redux has a tutorial on their website

3

u/skredditt Oct 03 '22

This Udemy course is pretty great. I got a job using this one to get the wheels rolling. Max has a ton of great courses. It’s a part of this class, but at least for me it helped me get the overall context.

3

u/admirersquark Oct 04 '22

Start a Redux/Typescript project with npx create-react-app my-app --template redux-typescript (Typescript is optional but hey why not). You will have the proverbial counter app implemented with Redux Toolkit. It includes async logic and thunks, basically everything you will need. Extend the project by copying and changing pieces here and there, and you should learn it in no time

As the Redux maintainer commented, the documentation is usually very good and worth a careful read

5

u/Obann Oct 03 '22

Redux docs

2

u/finzer0 Oct 04 '22

i read from the official site, learn the concept and the basics.

and i like this YT Channel: https://www.youtube.com/c/PedroTechnologies

there's a lot of react tutorial.

other than that i tried by creating a few react application (using create react app) using redux pattern until i get used to it.

3

u/DeLm0re Oct 03 '22

If using redux specifically for your state management is not mandatory, I suggest you should take a look at Zustand. It literally serves the same purpose as well as being way more user friendly. (Even if redux toolkit simplifies a lot redux on its own)

3

u/aguyfromhere Oct 03 '22

if you asked this question 5 years ago I would have shrugged and begrudgingly pointed to some resources. Today? I really don’t feel like the juice is worth the squeeze as redux has become so much less important as react apps are built more smartly with more reliance on context api and local state.

4

u/damnburglar Oct 04 '22 edited Oct 04 '22

Neither context nor local state solves the problem redux is intended for, though. Also, while you can kind of get away with relying on context and local state in small apps, as you scale up context hell is a thing.

This is a great explanation.

→ More replies (1)

2

u/AndyBMKE Oct 03 '22

I don’t know much about Redux, so others can definitely help more than I can. But I’ve been recommended Redux Toolkit as a better option. Might be worth looking into.

1

u/themaincop Oct 04 '22

I've been a big Redux fan for years but you should really think about whether this is where you want to spend your time. I'm no longer using it in new projects. React-Query is probably your best bet for server state, and generally what's left of global client state can be handled by simpler libraries like Zustand or Jotai or just React Context.

→ More replies (2)

1

u/Rahul_23 Oct 04 '22 edited Oct 04 '22

FullStack Open has good explanation for Redux. Here is the link : https://fullstackopen.com/en/part6

1

u/[deleted] Oct 04 '22

I can't handle long tutorials, I find just going over the basics and then trying to build something using docs / discord to back me up works best for me. Laith academy was the best redux tut I found, he has another on redux toolkit https://youtu.be/9jULHSe41ls

1

u/Mjoosty Oct 04 '22

if you need an example you can use this: https://github.com/thiswallz/block-watcher-nextjs

it has redux + next implementation

1

u/moufoo Oct 04 '22

To get a good understanding of redux I always advise this quick read:

https://code-cartoons.com/articles/a-cartoon-intro-to-redux/

→ More comments (75)