Redux Made Easy | Learn React Redux | Redux Tutorial for Beginners
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a Learn React tutorial series playlist:
• React Tutorials
🔗 Project Source Code: github.com/gitdagray/easy_pea...
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
(13:03) Refactoring index.js
(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:
easy-peasy.vercel.app/
🔗 Rules of Hooks:
reactjs.org/docs/hooks-rules....
🔗 Collections of Hooks:
nikgraf.github.io/react-hooks/
www.npmjs.com/package/react-use
🔗 Axios:
www.npmjs.com/package/axios
🔗 React Router:
reactrouter.com
🔗 JSON-Server:
www.npmjs.com/package/json-se...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
🔗 Styled Components: styled-components.com/
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
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 - วิทยาศาสตร์และเทคโนโลยี
![THE TOYS x NONT TANONT - ดอกไม้ที่รอฝน (spring) [Official MV]](http://i.ytimg.com/vi/pPa1d5cC8M4/mqdefault.jpg)
I really like Easy Peasy. It is an abstraction of Redux - that is Redux is running underneath it - and Easy Peasy makes the usage...well, easy! Redux can be difficult to learn, but I wanted to add something about in this Learn React beginners tutorial series. If you are just starting out with React, go to the beginning of the Learn React series here: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
Thanks god i found this gentlemen, good job sir keep it up
You're welcome! 🙏💯
Amazing contents sir!!!, thank you very much
You're welcome! 🙏
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!
Hello Ivan - yes, Redux can be confusing. If you look at the store.js file, you see that we have different actions like setEditTitle that receive the current state AND a payload as arguments. The payload depends on what the action is. For setEditTitle, if we look at the EditPost.js file, the onChange event of the title input allows us to pass in a new title for the post. That is the payload for setEditTitle. In the same way, setEditBody receives a payload that has text for the body of the post. I hope this helps!
@@DaveGrayTeachesCode Ahhhh I see, so it's essentially like the parameter that will either override the state or be appended to it, I think I get it now. I think payload is just a weird name for it, but I see, thanks a lot Dave.
CONGRATS FOR 100K
Thanks!!
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?
Hi i think you didn't noticed my comment for better reach i am replying here
Thank You.
You're welcome Spicy!
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
Amazing tutorial
Glad you liked it! 💯
@@DaveGrayTeachesCode Thank you very much
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??
Thank you Dave for this video. Nothing works anymore with React Router V6...
You're welcome - In the course resources, I shared an update to this blog project for RRv6. Here is a link: th-cam.com/video/XBRLVRjZ3CQ/w-d-xo.html
thanks teacher. but I feel React context is much easier to use. I wonder when I need to use easy-peasy ?
It is your preference or your team's choice. Redux is used most often for larger applications with a lot of state to keep track of.
@@DaveGrayTeachesCode thank you teacher. I am very grateful to you.
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]
And that function can be used in thunk as well
It is Javascript, so yes, you can create a function. Thinking in a Reactful way, it is preferred to create a hook. Hooks do have some benefits in React. This video dives deeper into creating Axios hooks: th-cam.com/video/NqdqnfzOQFE/w-d-xo.html
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?
I'm not entirely sure what you are asking - but I'll attempt to answer. We are using Easy Peasy Redux here and not Context. When you say "dependency", it makes me think of the dependency array in the useEffect hook - and maybe that is what you are referring to. You do not need to add the setState function (whatever it is named... setPosts, setSearchResults, etc) as a dependency in useEffect in the current version of React (currently v18). In the past, you didn't need to either BUT React would provide a confusing dependency warning saying that you did need to... so I just included them. If not, I would likely have had many questions about that warning. So to sum up, you can skip putting any setState function in the dependency array for useEffect. I hope I answered the right question.
@@DaveGrayTeachesCode why are you adding setPosts in the dependency list? It's just a useStoreActions in 16:45 time frame. During that video you told that ohh we need to add this because react complaints us to add like that
I just answered this question in my first reply?
Quoting it here: "You do not need to add the setState function (whatever it is named... setPosts, setSearchResults, etc) as a dependency in useEffect in the current version of React (currently v18). In the past, you didn't need to either BUT React would provide a confusing dependency warning saying that you did need to... so I just included them. If not, I would likely have had many questions about that warning. So to sum up, you can skip putting any setState function in the dependency array for useEffect. "
Also, to insure your questions are answered and seen, please join my Discord: discord.gg/neKghyefqh
Thanks alot Dave i feel like incomplete after finishing the series. Now makes sense. Thankyou so much Dave
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.
I would only be guessing about your code. Compare your code to the code available at the course resources link in the description.
@@DaveGrayTeachesCode hello sir .. I have the same problem that Cham's has , idk if it's coincidence or may be there is a problem with react v 18 or something, (I'm sure I did the same code as yours and I checked it many times :( .. )
@@DoraG0N If you think it is React 18, this video may help: th-cam.com/video/81faZzp18NM/w-d-xo.html
I have a question, how do you manage your directory & file names with camelCase/capital? is there any rules for naming?
It can depend on the team and project. Go with the rules of your dev team at work. For your own projects, many approaches can be used. I should create a video for this 🚀
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.
plus filteredResults return empty array for me :(
Compare your code to my source code to find the differences. Source code available in the resources.
@@DaveGrayTeachesCode mine was also returning an empty array, I cloned the chapter 22 repo, ran npm I, but then when I run npm start I get the error: Error: error:0308010C:digital envelope routines::unsupported.
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 && (
{fetchError}
)}
Anyone else resolved this issue?
Hey, I have the same problem. Did you fix it by any chance?
I think I had destructured searchResults instead of leaving it as a const variable. It was a simple mistake for me. Not sure if you have the same scenario. I should've had this:
const searchResults = useStoreState((state) => state.searchResults);
but I had this instead:
const { searchResults } = useStoreState((state) => state.searchResults);
Failed to load resource: the server responded with a status of 404 (Not Found) >< help
Sounds like you need to start json-server.
@@DaveGrayTeachesCode will try after thanks for sharing ~ :D
Could you please do a react native tutorial
I want to do this. It will be next year sometime before I get the chance.
please make on video redux thunk crash course
Thanks for the request! 🙏
@@DaveGrayTeachesCode please also make a video redux saga and redux toolkit crash course
Pros and Cons of Redux vs Context?
Good question, Kyle - The answer could probably be its own video. TLDR: Context is built-in and simpler. I would use it for simple and medium-sized projects. Easy peasy redux is the easiest version of Redux I have seen. You could also use it for small and medium projects. Redux toolkit is only for large complex state management. You would see it in Enterprise level projects.
If I used only easy peasy that mean I don't need to use redux !
Too much information. This video should be labelled "for intermediate to advanced users". Not for beginners