On my journey of learning React, I was moving along nicely. It made sense to me. But after a while I kept running into a problem while I was following along, watching others write code in videos: Redux.
I tried. Really, I did. I did tutorials on YouTube. I did courses on Udemy. I tried to make sense out of what others were posting in forums and blogs... But I just didn't get Redux. I had a decent concept of what it did but I couldn't figure out how it did it.
Finally, I found FreeCodeCamp. I did the JavaScript algorithm stuff first, then went back and did the Responsive Web curriculum. When I got to Front End Libraries, I was breezing through it as well (I have been doing this for a while, don't feel bad if this wasn't the case for you) until I hit the Redux portion.
I was actually reading everything. Word. For. Word.
And then, lo and behold, the lights came on. I could see it. I had everything laid out before me in a single file and I could actually follow the logic of what all the pieces did and how they interacted. (I still don't know why I didn't think of that before...)
Let me stop for a minute and say, for the record, that I love the videos I watched and the courses I took. The majority of the instructors are super knowledgeable in these topics. But the problem I had was they were splitting the Redux code up into different files (which is proper to do) in a way that made it nigh impossible to put it together in my mind.
Why were they like that? The instructors were teaching React-Redux. They taught me how to use connect() to "wire-up" my React component to a Redux store. Which was awesome. But still left me confused.
I honestly don't think I ever even took into consideration that Redux was a thing on its own.
So, I created this Simple Redux Example on CodePen for anyone wanting to tinker with Redux as a stand-alone library.
Update:
Follow-up post available here.
Oldest comments (9)
Hey Ed,
Cool post here!
Just wanted to give you a heads up that you could also embed this if you'd like:
I went along a similar journey. Redux finally clicked for me when I tried to implement unidirectional data flow in plain old vanilla JavaScript (no frameworks). I created a naive implementation of a store that would update subscribers when it was updated via a reducer. Lo and behold as I was doing some research on the pattern what I was really doing was implementing Redux. And that's when it clicked!
Hi, I'm a Redux maintainer.
Out of curiosity, did you try looking at the official Redux docs at all during this process? If yes, do you have any feedback on how they did or did not help you? We're currently planning a major revamp of the docs, and I'd love to know how we can improve them.
If you didn't look at the docs, was there a particular reason why not?
The "teaching Redux + React-Redux" thing is a valid point that I've seen come up a number of times. On the one hand, given that Redux is primarily used with React, it's reasonable to teach
connect()right away. Dave Ceddia's Complete React Redux Tutorial takes that approach.On the other hand, you can use Redux without any UI layer (or framework) at all, and doing that work "by hand" may help make it more obvious what's going on. The slides for my "Redux Fundamentals" workshop try to take that "ground up" approach, including showing how you would have to manually integrate Redux with React if you weren't using
connect(). (My post The History and Implementation of React-Redux also goes into details on just whatconnect()does internally and why it's needed.)I've got one big suggestion I'd like to offer. Please check out our new Redux Starter Kit package. 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:
redux-starter-kit.js.org
Hope that helps, and please let me know if you've got any questions I can answer!
Honestly, no, I didn't consult the official Redux docs. As I stated in my post, I didn't even realize it was a stand alone library until I the I ran into it on FreeCodeCamp.
Thanks for the resources you provided, I'm sure they will come in handy as I'm implementing all that I've been learning recently.
Yeah, as a general suggestion: whenever you do start trying to use any library, it helps to go straight to the official docs and repo right away. There are certainly some great tutorials for all tools that have been written by their community and users, but it's also good to see how a tool describes itself and how it should be used.
Hello! I'm very interested in learning Redux and have tried a couple times to do the tutorial from the official docs but I still lack an understanding or general idea of how redux works. I've been at it for only a couple of weeks and i'm not a developer, just learning, but I would love to know how I could be of any help or just follow along with the revamp of the docs. Thanks :)
Hiya! Given your description, I think the best way to contribute would be to if you could go through the current tutorial pages, write down everything that you find particularly confusing or hard to understand, and add a comment to this thread listing those thoughts:
github.com/reduxjs/redux/issues/3313
That will help us think about better ways to explain things.
Also, if you read through some of the other tutorials that I linked in the parent comment, do any of those explanations "click" better for you? If so, please let us know what other explanations you found easier to understand.
Will do! Thanks for your answer :D I'll read the thread and check out the tutos on your parent comment so I can start commenting. Thanks again!
Hey friend, at beginning I got similar experience. I think the best way to understand the pattern or concept is to write the CODE, and KEEP WRITING it until you understand it. It works for me ..