Master Redux in 30 minutes with Todo List Project | Redux in React JS | Reducers | Actions
ฝัง
- เผยแพร่เมื่อ 4 ก.ย. 2024
- Let's learn React Redux in one video with a Todo List Project including its concepts such as Reducers, actions, Provider, Middlewares like Redux Thunk, abd hooks like useDispatch and useSelector.
If any questions, ask me here-
/ roadsidecoder
Read the Written Article Here-
/ getting-started-with-r...
_____________________________________________________
Flexbox in 20 Minutes -
• Master CSS Flexbox in ...
React Router DOM Tutorial-
• React Router Dom [ Ful...
Make React App a PWA -
• Convert React JS App i...
Material UI -
material-ui.com/
Learn React From Scratch -
• React JS Workshop Day ...
Thank you brother for clearing several concepts of Redux.
My pleasure 🤘
Its Ok Bro No Problem
after watching this video, I understand well about reducers and actions. thank you sir .
Glad you liked it. Don't forget to subscribe!
@@RoadsideCoder yeah!! sure
@@RoadsideCoder sir, can you please explain me how to set input field to empty after submit.
Contact me on instagram @RoadsideCoder
@@RoadsideCoder ok sir
If anyone has problems with the list not showing up just go to your reducer and remove array from here case actions.ADD_TODO:
return {
todos: action.payload,
...state.todos,
};
the array was wrapping around action.payload, ....state.todo and couldnt get rendered because the output was todos: { 0: [ { id: ...., todos: ....} ]} so you would have to somehow map the 0 and so on so on
Thank you so much man....this was really helpful
@@amirchappalwala1568 glad I could help
Remove array, u mean that [] brackets right?? at 18:45?
Also can u share it here, pliz? I am having the same problem
export const TodoReducer = (state = {todos : []},action)=>{
switch(action.type){
case "ADD" :
return {
todos: action.payload,
...state.todos,
};
case "REMOVE" :
return {todo : action.payload};
default :
return state;
}
}
Please bring more redux-based projects.
Yes definitely
Awesome tutorial 🙏
Thank you 🙌
Thank you for explaining
what is the use of initialState in store.js file? we have never used it in the code
thanks
Thanks brother'
Thank you❤
Awesome tutorial man.. can you do a Redux-Saga tutorial..
Definitely!
thank you.. i already subbed =)
greate video it can be more of it if you explained about thung littile big thogh
Thanks Tejal.. Sure I'll make a standalone video for redux-thunk.. Also You can always refer to docs if u need the best explanation
awesome bro
Hey, what's the difference between Npx and Npm create-react-app. Couldn't find a good explanation on Google. Thanks
I think npx is mostly used to fetch boilerplate packages..
could you please share the source code for this?
ive witeen the same code but , upon entering the todos list is not showing up ,help
Try to compare your code with mine, must be some typo.
what's the preferred way?
is it the redux tool-kit way or this method
Both have their own use cases, but toolkit is easier I believe.
Why did you not return the state with the spread operator or did we not lose the state? like return {...state, todos:action.payload } because I did this with another application and got an error of a map function in the end.
So the thing is with the curly braces, when you add those curly braces like example.map((e => {return (//Something)})) the retuen statement is necessary, whereas if you use example.map((e => ((//Something)))) normal braces there is no need to add "return"
it says action is not defined
gyes plzz can u help me
Bro createStore is not available. What to do now. I guess react redux has been updated.
Now you can use
configureStore
Hey when i Click on Add/Go button, the page reloads, but the todo doesn't show up, can anyone help?
Cam u compare your code with mine? Must be some typo.
@@RoadsideCoder i did, like ik js, everything is correct, i am getting a warning in useSelector func..it says "Todo doesn't exist on type 'DefaultRootState'
@@RoadsideCoder can ya help pliz?
@@akarshankumar431 I Thing Your Code Is Wrong
Please, could you activate the subtitles, I want to translate it into Spanish.
Muchas gracias por tus videos, estoy comenzando con MERN.
Redux saga and Redux thunk please make on video
Definitely!
It's "okay" tutorial but I don't like how he uses logic inside of an action.
Full seo, I don't know about meta tags..
Next video will be on how u can improve react app's SEO
Nice ❤
Add captions bro
plz make a tutorial for redux toolkit
Sure!
not beginner friendly
exactly
plzz make chat app and shopping cart with redux
Yes The Chat App in planning stage.. Coming soon
@@RoadsideCoder thank uu
redux thunk pr video bna do
Sure 👍
🙏👍
Github code???
Description
@@RoadsideCoder niii mil rha bhai description pr
bhay tum hindi me nhi padha sakte yar hindi me padhate to bhut subscribers hote tumhare
Too fast, not understanding as a beginner.
Brain shake
not liked
Thanks brother'
Thanks brother'