Struggling with Redux for 3 days can any one guide

JavaScript
#1

Hi,

I have been trying to learn and understand redux, i am watching some youtube videos and some text material as well, but i am so confused with dispatch, reducers and then then the changes i need to make to react components,

I am not able to understand its work flow , can any one please guide me to some resource so i can use it…

Thanks

#2

Have you done the redux and redux+react sections of the curriculum?

#3

Hi @lynxlynxlynx ,

I am working from youtube videos right now, as the course curriculum is very extensive and i need to start working on redux soon i choose the courses on line…

Should i go through the curriculum , can i learn redux alone or will i need to make the react project first please guide

Thanks

#4

Your first goal would be trying to describe what Action, Reducer, and Store are. And why you need Redux instead of the default React.

#5

Hi, i just looked at the redux course and i am stuck on the very first example, how to create the store variable, seems a bit advanced to me

#6

Hi @gunhoo93, can you suggest a resource for that , thanks

#7

The guide from the official Redux website. For getting the basic things, it is the best resource I found. But if you have tried learning it for 3 days, there must have been some progress. Would you care to describe what you learned so far?

#8

@gunhoo93, well i do understand that we need to have action that are dispatched to reducer that changes the state, but i cannot understand the code part , also the part where we need to use compose and connect and so much stuff , it just something i am unable to do in code , so i understand the what i need but the process seems very difficult

#9

Suppose you are building a counter app, which has one state for the count and one action to increment count. At which point do you expect that you will get stuck?

#10

When i need to pass the data to update react, also while defining actions some times especially when there is ajax call

#11

So it sounds like you’ve got a handle on Redux’s part of the workflow: where each dispatched action goes through a reducer and its return value becomes the new state. But maybe you’re struggling with where Redux ties in with React.

There are 2 pieces to that: the Provider component, and the connect function.

The Provider is mostly straightforward. Wrap the root component with it, pass it the store as a prop, and you can basically forget about it after that.

The connect function is a bit more complex, because of the higher-order function syntax and the mapStateToProps function you need to provide, but let’s look at those. Suppose you have a component called Counter that (a) needs data from the Redux store and/or (b) needs to be able to dispatch an action. (if neither - then don’t connect it to Redux at all)

The last line of the file will look something like this:

export default connect(mapStateToProps)(Counter)

The connect call works like this:

  • The first part, connect(mapStateToProps), calls connect and passes in your mapStateToProps, and then it returns a function. That function isn’t given a name here but let’s just call it “X”.
  • The second part calls that returned function with your component (think of it like X(Counter)). That in turn returns a new component which is the connected Counter.

The other key part to this is the mapStateToProps function. Redux has no idea what data your component needs, so that’s the job of mapStateToProps - to take the entire state, and pick out the pieces that you need for this specific component. It literally creates a mapping from state => props.

This one takes the whole state and picks out the count property and passes it in as the count prop:

function mapStateToProps(state) {
  return {
    count: state.count
  }
}

A lot of times you’ll see this written as an arrow function instead, like this:

const mapStateToProps = state => ({
  count: state.count
})

It’s more succinct but it does the same thing.

A made a youtube video a little while ago that walks through how to add Redux to a React “counter” app. It might be helpful to get the whole overview.

2 Likes
#12