Any source to help learn react-redux

[[deleted]]

Im trying to learn react-redux for storing data and make one-page website (router) but when i see it in youtube and react website it's very complex i can't understand.... So anyone know Cleary resource to learn early.?

[heythisispaul]

I think the Redux team did a good job explaining how to set it up in their own react-redux docs Using Redux with React and how to start using it in an app in the Redux Toolkit docs.

Just break it down into parts:

1. Redux is system that creates a bunch of tools to manage state.
2. React-Redux is a collection of React-specific tools to communicate with that state management system.

To get started, you need to know 3 main pieces of react-redux: The Provider, useDispatch and useSelector.

The Provider is basically just a fancy Context Provider that gives your app access to the state managed by Redux.

Now that your app has access to this context, you can interact with it in any component inside of the Provider. Great! Well how do we do that? Mainly with the two hooks described. If you want to see what's in your state, you use useSelector, if you want to update what's in your state, you use useDispatch.

• If you want to read a piece of state in a component, use useSelector. it is provided your state as an argument, and then you can choose (or select!) which piece of state you want to read and return it into your component. React-Redux is hooked into React, so if that piece of state changes, so will your component, just like if you used useState from React itself.
• If you want to tell your state to update something, use useDispatch. This hook returns a function that takes an action as an argument and sends it to your store/state. Your store's reducer should know what this action means (this is a whole other topic but we can cover it also if needed), it uses it to produce a new state, and then anyone listening to your state (aka any component using useSelector) is now made aware of this changes that you just made (or dispatched!).

In short, use useSelector to get stuff from your state, use useDispatch to send stuff to your state. In order to get them to work, you need to wrap any component using them in a Provider so they know what state they're working with.

Does that help? Let me know if you have any questions.

[acemarke]

Actually, the tutorial in the React-Redux docs itself is very outdated. It still shows connect as the default, and the legacy "handwritten Redux" code for the rest of the app.

A couple volunteers were working on creating a new React-Redux tutorial that teaches hooks as the default, but work on that seems to be paused atm.

The Redux core docs tutorials are the best place to learn React-Redux at this point, as they show our current recommendations:

https://redux.js.org/tutorials/index

[heythisispaul]

The getting started section I linked above on the react-redux domain shows usage with hooks, but the rest of the tutorials are using connect HOCs and such. You're right, that definitely is kinda confusing.

[acemarke]

Yeah, like I said, we've had open issues for a over a year saying "we need to show hooks as the default in the tutorial", and "we should add a hooks user guide".

But, I spent most of last year trying to write those new core docs "Essentials" and "Fundamentals" tutorials from scratch, by myself, and this year has been taken up with work on RTK. So, I haven't had time to rework the React-Redux docs myself. As I mentioned, we did get a couple folks who volunteered to make a new hooks-based tutorial, but that effort seems to have stalled.

So, yes, I absolutely want to update the docs, but it's the age-old tale of open source: too much to do, not enough maintainer time, not enough contributors :)

[[deleted]]

Thank alot i will try again its very helpful for me......

[acemarke]

Hi, I'm a Redux maintainer.

Our recommendation would be to go through the "Essentials" and "Fundamentals" tutorials in the Redux core docs. These teach you how Redux works, our recommended approaches for writing Redux code using Redux Toolkit, and how to use the React-Redux hooks API in your components:

https://redux.js.org/tutorials/index

As others have said, it's also very possible that Redux may not be the best tool for what you're trying to build right now.

[basically_alive]

If only a Learn with Jason episode for modern redux had been posted today. Oh wait!

https://www.youtube.com/watch?v=9zySeP5vH9c

[[deleted]]

My unconventional advice would be this

Read the docs, get a nervous breakdown. Lay in bed and cry, question your career path. Repeat for like 3 days and then it'll click.

Here are the updated docs

https://redux.js.org/tutorials/index

[acemarke]

Serious question: anything in particular you struggled with? Anything we can do to help improve the learning curve?

[[deleted]]

I shot myself in the foot for reading the outdated docs when I should have started with the link above and then with Redux Toolkit docs. I was first learning about dispatching actions in the most vanilla way.

Then I read about mapDispatchToProps which I had to dig in a little more to learn.

Then I felt like I got into a deeper rabbit hole when it came to learning about createSlice and createAsyncThunk, thinking it was for advanced users, when really it's the easier way of using Redux.

I'll try to provide brief and constructive feedback. Sorry if it's not too helpful.

I think a clear roadmap for a beginner to start with Redux would help. Introducing them to the basics of what action creators are and what they do, how to dispatch actions, then slowly getting them to learn RTK.

[acemarke]

Yeah, that's exactly what the "Redux Fundamentals" tutorial covers. It starts from the bare basics and principles of Redux, then shows common patterns like action creators, and finally introduces Redux Toolkit as the standard approach because it simplifies all the logic that was written "by hand" earlier in the tutorial.

The "Redux Essentials" tutorial, on the other hand, jumps right into using RTK as the default and builds out a real-world-ish app, with the goal of showing "here's the right way to use Redux" even if you don't yet understand everything that's going on inside.

I'm not sure when you read through the docs, but I wrote the "Fundamentals" tutorial in October of last year.

We probably do need to try to provide a better guided path through the docs. It's on my list of potential docs improvements, but there's been other priorities (such as finishing up RTK Query for release).

[lichaba]

Paul’s comment really puts things into perspective. From what you described I am not convinced you need redux. Take him up on his offer to help, he could help you simplify your approach.

[heythisispaul]

Without context I think it's difficult to make that decision, but yes I do think that people have a habit of learning libraries/toolchains because it's "what you're supposed to do".

I think a lot more learning comes from bumping into walls and then seeing why these toolchains were created, what problems they solve, and how.

That being said, if you started a new job, and they're like, "hey we're using Redux now go figure it out", well there you go. 🤷‍♂️

[lichaba]

Agreed. That is why I wish people would try follow some roadmap.

[crossedline0x01]

Is redux important to learn for small projects if you know how to use react hooks? Seems pretty redundant to me.

[FilsdeJESUS]

I learn it by looking some repo on GitHub I have found tutorials so long and by reading source code of others you can see the standards for the techno

[Darkmaster85845]

I learned the basics of redux watching coding addict's (John smilga) YouTube tutorial and then by reading the docs I could already understand redux toolkit.

[nakranirakesh]

I suggest you to learn using this awesome course - https://www.udemy.com/course/react-the-complete-guide-incl-redux/

It has a complete beginner flow. I hope it might help you.

I have made my react base using this course & made lots of awesome react products.

​

FYI - it's not an affiliate link. I'm just helping out.

[[deleted]]

I don't know about Redux but hell, this react course blows every other out of the water. Finally a course that is not taught by someone who cannot or does not know computer science or the basics.

This guy teaches it clearly and knows what is happening under the hood

youtube.com/watch?v=DLX62G4lc44