Redux in 100 Seconds

Redux is a popular state management pattern for large-scale web applications. Learn the basics of the Redux with React fireship.io/courses/react/
#js #webdev #100SecondsOfCode
🔗 Resources
Redux Toolkit redux-toolkit.js.org/
100 Seconds of React • React in 100 Seconds
Should I use Redux? / you-might-not-need-redux
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is Redux?
- Should I use Redux in my app?
- Redux quickstart tutorial
- How does redux patter work?
- Why do some developers hate Redux?

[@SQLinjected]

The thing I like about redux is if I complain about it on reddit the creator always comes along and tells me why I'm wrong

[@evilgibson]

@SQLinjected I... I think you are safe here in the KZbin comments. Hide amongst the filth and garbage of this cursed ground and take the creator's name and product in vain!

[@cashycash1]

Let me know when he shows up here 🤣

[@kunaljoshi8038]

u/acemarke ftw

[@chedisLoL]

@@krtirtho Likely he has a webscraper with AI that detects any negative context and redux. He protec

[@rand0mtv660]

To be honest, I like the approach that current Redux maintainer (dude with the Simpsons avatar) uses online. He explicitly mentioned a bunch of times that you don't need Redux, but then also tries to really explain why and how you might use it and when you might need it. I believe that he is really just trying to combat a bunch of misconceptions and opinions about Redux online that come from poor tutorials and blog posts that have been created in the last 5+ years.

[@pim8268]

Wow, the animations are pretty neat. This is my favorite coding channel on KZbin. It doesn't matter what you do. If you deliver quality, you'll be successful.

[@randomuser66438]

-quality- _value_

[@LinkEX]

@@randomuser66438 I'd argue both extremes work. Fireship being one that does provide _quality_ content. Thanks to KZbin's algorithm, the most successful channels definitely aren't those that are all about quality, though.

[@thepisewigeon]

I remember I almost ran from React when I stumbled upon Redux lmao, it took me to read the ''you might not need Redux'' article and get a little bit of experience with Vuex to finally come back. Great video btw

[@usmanmurtala7100]

Coming from vuex background makes learning redux a cakewalk, i mean afterall they are all based on the flux pattern.

[@Zephyr_Prashant]

Dan Abramov himself has said that you shouldn't use redux unless absolutely necessary. Its good only when there are a lot of moving parts.

[@HamidKarzai]

@Cheoys I think redux is a huge pain, you go through a whole lot of setup, boilerplate and ceremony to accomplish the end result of reading and writing to a global variable (but it's a good global variable, not a bad global variable like in other contexts, because of how functional it is, and the more functional your global variable is then the less bad it is). But yeah it has a pretty sweet devtools extension

[@elgingeroo]

@@HamidKarzai with toolkit the boilerplate is reduced immensely and it's not that big of a deal anymore. Imo very easy and intuitive to use now!

[@drewwilson8756]

Dont forget to include the number of developers on a project as part of those moving parts :D

[@TheCameltotem]

Couldn't one just use eventcallbacks in child components? Feels like everything dont have to be a redux store.

[@Norfeldt]

@Cheoys if you like good state management dev tools like then you might be interested in trying out react-query also has dev tools to help you out.

[@vipbossman]

You are amazing at what you do !! Your content is THE BEST when explaining technologies in such a short time.

[@dungphan5565]

I think we need a video of Jeff trying different state managment libraries: Redux, Mobx, Recoil, Zustand, Jotai, etc

[@bebretter9027]

Hello DZUNG. you seem like a hardworking person and a lifelomg learner.. may i ask you some question about your preference in learning. A: A sophisticated text with deep exposure for a subject. B: A beautifullly designed web with moderate exposure for a subject. C: A simple and understandable words with low exposure for a subject. D: A project based learning with no exposure on a subject.. I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁

[@BirdTho]

I love recoil

[@seaweedglob]

Check out Jack Herrington. He did a video just like that.

[@mrmusanda3576]

Mobx is best

[@mrmusanda3576]

@@BirdTho context API is giving alot of problems, so started using recoil now

[@tuxhome3686]

I was just looking for a redux tutorial by you! Great timing :)

[@PhilipAlexanderHassialis]

Being a vocal advocate of Redux+Redux Toolkit, this video is so simple, clean and thorough in its presentation, I am semi-tempted to use it as training material in my team of frontend engineers. Well done man, simply amazing work!

[@ricardorien]

You must be really good. Redux was the thing that almost kick me out of the programing world.

[@johnmagbag2711]

@@ricardorien Redux is not that hard. It's just too overwhelming because of the amount of boilerplate just to do a simple job. Good thing, the Redux toolkit exists.

[@PPLPSMorse]

I love it. It coming with RTK Query is pretty great as well.

[@PhilipAlexanderHassialis]

@@johnmagbag2711 The fact that Dan & co. pulled up a thing like RTK shows how much problematic the initial approach was. The fact that the Redux team now officially says that if you want to use Redux, use RTK shows thay they know what they are doing.

[@PhilipAlexanderHassialis]

@@PPLPSMorse actually RTK query (for me personally) is just a tad too much hassle for what you get back - but that's just me. Personally, if I had data that need caching and refetching, on a timely manner even, I would go with useSWR, create a custom hook out of my API call and have it dispatch the data to the Redux store - React will update anyways. For most of the cases, useSWR is 90% of what you will get from RTK query with a subfraction of the code to write. I hope the RTK team comes up with something similar because all these hoops that you have to jump through don't make so much sense when your use case is "duh, API gives data, me puts DATA in store, React shows data on screen ooga booga".

[@VedantRasote]

Incredible Redux explanation! 👏 This quick revision is exactly what I needed - no non-sense, straight to the point. Thanks a @fireship! Subscribed

[@sunkanmifafowora9402]

Been confused about this for the longest time, thanks for always giving me a clear idea of what certain Frontend dev topics and tools are about. You're awesome man.

[@nazninsultana2341]

Was waiting for Redux, you came up with redux. Thanks a ton Fireship 😃

[@laxmanadhikari3989]

I love this type of video no nonsense just to the point . love you fireship

[@macqygarcia2310]

Thanks Jeff for slowing a little bit and really love it :)

[@hunterbertoson156]

This helped me understand Redux much better. Thank you!!!

[@pett22v20]

dude you have a gift. you were able to explain redux basics in a short video instead of most videos where they half explain it in 30 mins

[@andrewc8125]

It is time for the State Management battle: Zustand, Recoil, Jotai, mobx...and so on

[@philmarlin6204]

Zustand for sure. I've managed a fairly decent sized codebase around 10k lines and it was a pain using Redux and other libraries that I've had to refactor multiple times to ultimately using Zustand.

[@andrewc8125]

@@philmarlin6204 Zustand is good. I personally like atomic state management

[@squish4502]

+1 for zustand

[@MrMidoBB]

React query + an atomic state manager for small client side things because React context is abusive. That's the way to go IMO

[@maximiliankrause4762]

Nothing beats Zustand for global client-side state together with React Query for server-side for me. The Zustand API is just so nice to look at (especially after coming from "old" Redux...)

[@linkeatspie]

That toolkit looks amazing, very neat

[@ScottPark]

This is the most concise and simple explanation of redux slice I've seen on the web.

[@miguel_bogota]

Redux toolkit definitely helps with all the complexity that it meant use Redux. I have used it a couple times and has been the worse experience of my life, but using it with toolkit, it might just be a bad headache only. I want to try it out and see what happens. Thanks Jeff. Keep up the good work!

[@adiletnasirov4413]

Consice & clear & right to the point. Good Job 👍

[@kleinzd]

100 second vids like these are a gift. i made sense of redux better than tutorials which spend 1 hour teaching me exercises and drowning me with programming jargon

[@adriancliton9706]

whoever put this together is just as good as the people developing and maintaining redux. Thanks a lot.

[@tobi807]

Wait this is so perfect, I just looked up what redux is yesterday - THANK YOU

[@sv122]

I have never in my life seen this used in a way that positively impact the codebase of a (enterprise) application.

[@mosialive]

Thank you. This was so short and direct.

[@AkshatRamanathan]

Perfect. Was waiting for this for ages

[@334Bena]

Thank you for finally explaining the proper usecase for it

[@Igor-km5qp]

Perfect short explanation.Thanks!

[@Yahyajoud]

Best Redux explanation, totally clear and simple. Thanks Fireship 🔥❤️

[@bebretter9027]

Hello yahye.. , you seem like a lifelong learner.. may i ask you some question about your preference in learning. A: A sophisticated text with deep exposure for a subject. B: A beautifullly designed web with moderate exposure for a subject. C: A simple and understandable words with low exposure for a subject. D: A project based learning with no exposure on a subject.. I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁

[@DioArsya]

this helps me bootstrap and run the minimum redux for my live coding interview :) thank you so much, buddy!

[@Wardret]

It is also good to mention RTK Query, when we are already talking about redux toolkit

[@xcrxwadda8287]

Notifications always on...keep up the good work

[@RedCrafter07]

Woah, you're explaining everything so good! When I want to learn something about programming, your channel is the only way 🙂

[@christophkrass6929]

This is an amazingly simple explanation

[@Ali2307013]

I can swear I was looking this up yesterday just before the video was posted 🤯

[@krishgarg2806]

It's a great explanation video. Though for personal projects, I wouldn't recommend using this as it gets very boilerplatey. If you want to practice, then sure go ahead. But to just get the purpose of global state done, you can use the Context Api or other state management libraries like Recoil, Zustand, Hookstate, Jotai etc.

[@zeckul]

Have you tried Redux recently using Redux Toolkit? Most of the boilerplate is gone.

[@krishgarg2806]

@@zeckul I have, still it is more boilerplate than the options I have listed.

[@truongbuipv]

I agree with you

[@HonkletonDonkleton]

The code is boilerplate but also the terminology is boilerplate. Reducer, dispatcher blah blah blah its so unnecessary

[@feritperliare2890]

Fuck context sure ain’t boilerplate just walking in a cloud of fog trying to handle everything on your own instead of just actually handling the info logically

[@eleah2665]

Wow. This has everything I just learned in a 5 hour course.

[@Reaper_f30]

Having used redux force good few years. Toolkit looks like it really has taken a leap in reducing boilerplate and trying to centralize most of redux or as much as possible in one file

[@rajeshkanna9502]

I never stop any music in between, unless it is a notification from fireship 🤩

[@ozkirlisakal]

perfect and enjoying video, thanks!

[@prashantkhatiwada2970]

i think this video will be really helpful if you already have certain knowledge about redux and you wanna recall it or summarize everything in short

[@Jambajakumba]

Man how these logos just light up when it starts🙌🏼🙌🏼🙌🏼Crazy animation. Fireship in 100 seconds next😂

[@bassemboukadida4460]

best explanations ever thank you

[@chbrules]

I'm getting into React now, so this was a perfectly timed video. I needed this. Thanks!

[@ratulsaha9487]

U dont need redux unless u wanna work on legacy codebases. Newer companies dont use redux much. Damn they dont even use pure react much. Its mostly nextjs for enterprise apps.

[@chbrules]

@@ratulsaha9487 I'm planning on making a DB-driven Sa-aS application for businesses. Is there a reason I wouldn't use Redux? Is Next.JS its own framework? Or does it work with React?

[@heroe1486]

@@chbrules You have to find a reason to use redux not one to not use it. But learn React first, you can't really decide what to use if you don't even know what global state is and when/how often it's needed. NextJS is a React Framework, you don't need anything more than React knowledge to use it but you need to read their docs for additional things they bring like server side rendering and static site generation.

[@TheAndre2131]

@@chbrules DB will lie on the backend generally right? If you want to work with server state in client side I recommend react query, if you want to work with global state there are simpler libraries like zustand.

[@brave-coeurobiasnara1194]

Your a beautifull person, avoiding me to read documentation for implementing this on my ReactJs app, thanks you my god this was mutch faster with you

[@allesarfint]

"State (it's just your app's data)" I really needed that ELI5, have been trying to understand it for some time.

[@rahulsriram6295]

Loving that MonoLisa font in the text. Also try using it in the code

[@ashharkausar413]

Brilliant stuff. I would like to implement redux at some point.

[@INAVACL]

I cant believe this is more comprehensive than all the other guides XD

[@UwU-dx5hu]

I started using redux a few months ago. I love it I just love it. ❤

[@ricardorien]

Just when Im studying Redux for a posible new great job. Thanks as always

[@ricardorien]

Oh yeah, the day comes, And I'm not ready at all.

[@Maxiow]

Amazing explanation, thanks.

[@stefanghiban]

Hi! It would be great to have 100s with Pinia, as it is the new standard in state management libraries for vue.

[@eduardoolat]

Take a look at a library called easy-peasy, that is an abstraction of redux but is very developer friendly

[@ashequeulislam9720]

woah you are explaining very hard to understand topics in an easy to understand and excelent way! Good job jeff!

[@praveengopu9325]

thanks.yesterday i posted a comment about to make a video about redux in post.you just posted a video about redux today.thanks it will help

[@fernandoespinosa1596]

Wth man you are the best communicator in tech by miles.

[@salah77ism]

this is how i learned redux and turned out to know more from this vid than a friend who used redux structure in different projects

[@chris.dillon]

A few other alt libraries also work with redux dev tools (time travel etc). So you can avoid the boilerplate and have what is demonstrated here.

[@rand0mtv660]

Yeah I've noticed Zustand works with Redux dev tools. One downside is that Zustand store functions you call all just appear with the same name you give that store for dev tools integration. So it will always display "mystorename" compared to Redux showing actual action name for each action dispatched. Other features seemed to work pretty good so that's a single downside I've noticed so far.

[@felipearancibia9594]

Brilliant abstract of redux... the best i've seen

[@davidkhierl696]

2017 after learning basic of react I jump right into redux and I totally complains about the boilerplate nightmare, then moved to mobx not long enough I saw one of Ben Awad’s video mentioned zustand and I gave it a try and never looked back. At the time react context is released but I still find zustand very simple and easy to start with and no need to wrap your entire app with any provider.

[@gee_at_ease]

Thanks for this wonderful video

[@baducnguyen8200]

I used to hate it but now i love it! At least after when i learned about toolkit

[@chizuru1999]

dude i just made a test project and started learning redux toolkit yesterday 😂👍🏻

[@martinalcala4823]

RTK QUERY, from Redux Toolkit; IS BEAUTIFUL!

[@drect4928]

the amount of abstraction and metaphores. 100 seconds to explain Redux! damn dude u just goated!

[@markokraljevic1590]

nice overview and reminder

[@asadullahaziz]

I am convinced Jeff can read our brain. He knows what we need and he gives us that. Thanks Jeff !

[@CloudyyYT]

i literally typed redux in 100 seconds 2 hours ago and know you just uploaded it omg

[@sergioqcostas]

My first web app development was with angular, when I go into react I had my doubts about react being a decent framework due to having to pass the state all arround widgets, then i got to the chpater where they introduced redux and it all made sense and posible to write a propper app.

[@clever6150]

Wow! that's a very weird coincidence! I was searching for "Redux in 100 seconds" just the day before you upload this video, to find you uploading it the next day. 😂

[@martianpop42]

Notification Squad!

[@devkasunlakshitha]

I really love you man. ❤

[@Arbmosal]

Since you are covering Redux, I think you should do a video on Elm next :)

[@SahilKhan-xn5ne]

Waiting eagerly for Relay in 100 Seconds

[@isakawilliam]

wow! you made a video from my suggestion😁

[@dipeshrajoria]

Yesterday I just searched REDUX IN 100 SECONDS .. and today u posted🔥

[@arshadpakkali]

Maybe 100s of Dexie js ? . Dexie is awesome with react since you can create a custom hook so every mutations will reflect all the subscribed states. Basically with little bit of code it will be a better replacement to redux and as added bonus will give you offline function as well

[@2Alta]

couldn't have uploaded this at a better time!

[@le_travie7724]

Agreed I'm learning react atm

[@davidofug]

Haha, can't believe it would be possible to learn Redux in 100 seconds. Well done guys.

[@Powerm1nt.]

Waw the Redux Chrome extension is just Mamamiaa 👌

[@rafikkasmi1406]

truth ? i swear to god i never understood how redux works in my whole life, but ur 100seconds just went like a bullet into my brain, thank u jeff

[@Vexcited]

Would be cool to do a comparison with other state management libraries like `zustand`, `jotai`, ...

[@bobuccman1424]

i would love to see a 100secs video on nim

[@d.sherman8563]

Redux is great a making simple things difficult, but also making very difficult things simple. As with all tools, think whether you need it. Redux shines when you have complex side effects related to state changes. The most common example in http calls, but you can synchronise any side effect with state changes, such as updating web audio api nodes, you can implement realtime functionality by sharing actions over web-sockets, in this way the state change + side effects are shared between clients. For these complex tasks it's awesome and simplifies them tremendously, for basic crud views it's complete overkill and adds a ton of complexity.

[@AlexandrosFotiadis]

Totally agree, redux makes simple things difficult and difficult thinks simple, but in general difficulties in frontend is a bad idea... keep it simple.

[@teejaayme]

Liking Fireship videos becomes a habit, so I click thumbs-up first, then watch.

[@SridTech]

I don't know why but whenever I try to learn some thing new, fireship will provide a 100 second video explaining it. Some perfect sync going on with subscribers and fireship. 🔥 Found this video while learning redux.

[@devkasunlakshitha]

This happend to me too.

[@saimukundmeka762]

Good video, wanna learn moree

[@cornelcristianfilip5048]

You Rock bro'! 🤘🏼

[@a-fletcher]

I am dyslexic and autistic, I tried reading the docs could never understand. With this it make so much sense. Thank you for the help ❤️

[@oleksandrneprokin5973]

So good explanation of Redux. In addition, can somebody tell me what is the name of the theme in the video? Much cool one.

[@taylorallred6208]

I think the complaints about Redux actually have more to do with JavaScript. You see pretty much the same concepts in Elm and ClojureScript (re-frame) but done in a much nicer, cleaner, and more sensible way. Redux has the right concepts overall, imo.

[@lydianlights]

I agree -- the ideas of redux are correct but the janky way that it has to be implemented because of the mess of an API that React has built for itself makes it very unpleasant to use.

[@TheRealFoxFire]

Im still learning to code. This seems like tech magic...

[@maurov2104]

RxJS in 100 seconds, let's go!!!

[@_ulghun]

now we need 5 different react state library video 😁

[@qvcitizen]

Better explanation than my reading 2 hours

[@universecode1101]

Do you prefer Redux or Redux Toolkit? 😜 and inside React there is ContextApi so Redux is better for medium-large app

[@Rudxain]

Please make a video about Voca, a library for string processing in JS

[@ikarolaborda726]

Thank you very much for explain it in a simple way in enough time. Over the internet, there are some “sellcourses” idiots who can’t explain that in two hours.

[@vsquarevision2987]

Dude, What tools and softwares do you use to make these videos ??