Hey, guys! i have been trying to learn redux, from more than a week now and its getting very confusing and overwhelming. I was wondering if FCC is sufficient enough to learn redux from a beginners perspective. Is there anyway maybe i can make it a little bit easier to understand? I’am really stuck at the redux part.
1 Like
Redux definitely can be confusing. I encourage you to keep googling around and finding more resources to help you figure it out.
I can totally relate. I’ve finished the HTML/CSS front end course, I’ve finished the Javascript course. I’ve completed all the challenges for the front end libraries and now I’m workin on projects. Redux has been THE MOST brutal section I’ve encountered thus far.
I tried reading elsewhere, but not much help. I mean, first of all, there’s outside code you need to import just to get it working at all, which FCC does behind the scenes for you. Then there’s all this gibberish terminology that doesn’t mean anything when you first encounter them.
Even once you start to understand the relationship between Redux store, reducer, reducer combiner, action creators and actions, you still have no frikkin clue how it can work with react - how everything gets used.
Then when you get to the react-redux section, you get introduced to all these weird things like mapStateToProps, mapDispatchToProps, Appwrapper, Provider, etc. I’m like “what the bloody heck is all this gibberish?” What do they do? How do they work?
Then, once you think you’ve figured it all out, FCC throws in asynchronous dispatches and Redux thunk. I still don’t know how we’re supposed to apply what we’ve learn in that ASYNC challenge. I just followed the instructions and got the challenge to pass with little to know understanding of how any of it works.
Then when it comes time to apply what you’ve ‘learnt’ to your projects, you try to set up a react component and it doesn’t render. Then you spend hours trying figure out why it’s not working only to find out that the URL link codepen supplies to you DOESN’T WORK. So you go and find a link that does work, and congratulations. You just spent 3 hours getting react to render “hi” on the webpage. Now it’s time to actually start building.
Phew!
1 Like
Yeah, I did the challenges and got them to pass, not really understanding why or how. 
Now that I have a better understanding of React, I am going back and really learning Redux. The second time is easier.
3 Likes
So it seems like it is going to take lot of time to get used to the working of redux and react.
I think ill try the repetition method on this until i get very familiar with the concept.
Practicing the redux section multiple times might be a better approach.
It is useful to think of Redux being your app. React does the UI part, but what it will be doing is basically just rendering what the Redux state is at any one time.
- You have an object (the store) that represents different values that a user interacts with.
- The only way you can update those values is by sending a message to the store using the
dispatch(someAction)function attached to it. - Actions have to be a plain JS object that looks like
{type: "some_arbitrary_name", ...possiblySomeDataAsWell}. - That runs a function you define (the
reducer). - The only way you can look at the state of the store is by running the
getState()function attached to it.
I can’t emphasise enough that it is, conceptually, very simple once you grok it (which is hard at first), although it generally results in very repetitive and sometimes quite complex code).
Do the free Egghead course
Optionally read and understand the source code. Because this is literally Redux (the actual code has some more error handling and a few other methods to cover all use cases + few other small things, but this is the core of it):
function createStore(reducer) {
let state = undefined;
let listeners = [];
return {
getState() {
return state;
},
// A listener is a function that is run on every update.
// It is how, for example, react-redux works, it adds subscibers
// to the store which tell React to update when the store updates.
subscribe(listener) {
listeners.push(listener);
return function unsubscribe() {
const listenerIndex = listeners.indexOf(listener);
listeners.splice(listenerIndex, 1);
}
},
// This, given an action, updates the state and runs
// every one of the listener functions:
dispatch(action) {
state = reducer(state, action);
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i];
listener();
}
}
}
}
And you define a reducer function with some initial state to go with it and off you go, there is not any more to it than that, it is not magical. The Egghead course explains this quite well, it goes through building your own Redux from scratch.
3 Likes
It’s definitely complicated at first, because it’s nature is very different from how you’ve been dealing with interactions and data (state changes in redux terms) in front end programming before. It’s not difficult, though, as you build more things with redux, you’ll get the hang of it fairly quickly, because there’s really not much to it. @DanCouper’s explanation is very helpful. A lot of times it’s too much for small apps but for the sake of learning it, it’s worth the pain. Once you understand it well and can use with synchronous code without much thinking, then thunk or sagas for asynchronous programming will be much easier to understand because it’s just another layer in your redux app, although with additional complexity (sagas will require you to understand generators to use effectively).
1 Like
Just in case it’s lost in the noise: This. I was about the post the link myself but the forum noticed the duplicate. It’s the best tutorial on Redux there is, by the author of Redux.
2 Likes
Thanks a lot guys for advising and helping me out on the problem. It’s much appreciated. I’ll follow the Egghead course and continue my process. Thanks again.
I’m still on JS, but I would recommend that learners try to do evrything in their own editor / IDE to get used to coding the behind-the-scenes stuff. It may make things easier in the long term. After all, we don’t get good at what is done for us.
2 Likes
Hi All, I was in same state and I 'm still learning. While searching for good course, I landed below:
I must say this was really helpful for me to understand the Redux Cocept. It is free and hardly 40 mins video but given me so much confidence. It will be great if you too write same code after taking the course, tough stuff become easy when we do hands-on.