Redux Made Easy | Learn React Redux | Redux Tutorial for Beginners

Redux made easy to learn and apply to your project. Learn React Redux in this Redux tutorial for beginners. Redux has long been the state management solution for React. Easy Peasy Redux is an package that makes redux easy to add to your project.

🚀 This lesson is part of a Learn React tutorial series playlist:

Redux Made Easy | Learn React Redux | Redux Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:16) Overview / Goals
(01:26) Uninstalling packages
(02:27) Installing Easy Peasy Redux
(02:51) Starting the dev environment
(03:37) Creating the Easy Peasy store
(14:10) Refactoring App component
(17:51) Refactoring Nav
(21:20) Refactoring Home
(22:14) Refactoring PostPage
(24:41) Refactoring NewPost
(27:56) Refactoring EditPost
(33:46) Quick clean up
(34:33) Async clean up
(35:48) Refactoring Footer

🔗 Easy Peasy Redux:

🔗 Rules of Hooks:

🔗 Collections of Hooks:

🔗 Axios:

🔗 React Router:

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about Easy Peasy Redux with React helpful? If so, please share. Let me know your thoughts in the comments.

#react #redux #easy-peasy

[chrisstucker]

Context is nice for smaller use cases. But I must say that redux provides a much more robust and organised approach. It sort of makes it easier to envision the various states being managed across different components.

For instance in the nav component: when you alter the searchResults and send the payload to the Redux store, it then causes a refresh in the home component because that is using the searchResults state. So when you update a state, it gets sent to redux then relayed back the components that use that state then causes a re-render of the component with the updated state. It makes the whole flow of state much easier to follow IMO

[rezgui_aziz]

Thanks god i found this gentlemen, good job sir keep it up

[skillkrio]

Dave in 16:45 you are adding setPosts as dependency list before we didn't added setPosts as dependency list in the context api. Why are we adding setPosts as a dependency over there?

[ivanfrey]

Hey Dave, loving the content. I am a bit confused, do you think you could better elaborate on what the payload exactly is? I feel like your explanation was brief, maybe hearing more from you could clear up the confusion? Thank you!

[skillkrio]

I am commenting again as my previous comment didn't get noticed Dave in 16:45 you are adding setPosts as dependency list in App.js and also adding setSearchResults in Nav.js before we didn't added setPosts/setSearchResults as dependency list in the context api. why are we adding that?

[코린이세]

Amazing contents sir!!!, thank you very much

[chammyae]

Hello, I follow along this series with no problem but in this one after changing from Context api to easy-peasy, states are not updating. Posts are not showing when I reload. I can't type on form, I can't add post. I can't edit post. Can anyone tell me, what is happening. I'm so confused right now.

[metquadi]

thanks teacher. but I feel React context is much easier to use. I wonder when I need to use easy-peasy ?

[LiranUziel]

Tip: new way of state management do on a new project. this change made me look 100 times at every line to make sure i wrote it right.

[olimeunier]

Thank you Dave for this video. Nothing works anymore with React Router V6...

[shoaibkhan-eqvp]

Heyy guyss, can somebody help me! I followed this tutorial step by step but I'm getting an unknown error like their is not error message but the app is not visible. As I'm using latest vision of react router. I made a file called layout and in that file I use Outlet In between nav and footer. I think I'm unable to understand the syntax of easy peasy merging into react router (virsion 6), Is their anyone who can help me??

[Ruhgtfo]

Failed to load resource: the server responded with a status of 404 (Not Found) >< help

[samiullahsheikh]

Can someone just use utility function (regular function) instead of custom hook like your useAxiosFetch() for api call?

And can return arry of data, error and loading

Return [ data, error, loading]

[elAmigo]

I keep getting the following error but I can't trace it anywhere:

Home.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at Home (Home.js:12:1)

all I have there is the {fetchError} in the p element that is inside the :

{!isLoading && fetchError && (
<p className="statusMsg" style={{ color: "red" }}>
{fetchError}
</p>
)}


Anyone else resolved this issue?

[dafiraone]

I have a question, how do you manage your directory & file names with camelCase/capital? is there any rules for naming?

[abdulrahmanagboolaosho]

Could you please do a react native tutorial

[DeepakGupta-hjdv]

please make on video redux thunk crash course

[benedictmoeti]

Too much information. This video should be labelled "for intermediate to advanced users". Not for beginners

[salehm]

If I used only easy peasy that mean I don't need to use redux !