Master Redux in 30 minutes with Todo List Project | Redux in React JS | Reducers | Actions

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 ...

[@mohitsaud2071]

Thank you brother for clearing several concepts of Redux.

[@RoadsideCoder]

My pleasure 🤘

[@PrinceArtbees]

Its Ok Bro No Problem

[@zedsmelee]

Thank you for that, liked and subscribed to help you out. Really helpful upto date tutorial.

[@prachikhushal9138]

after watching this video, I understand well about reducers and actions. thank you sir .

[@RoadsideCoder]

Glad you liked it. Don't forget to subscribe!

[@prachikhushal9138]

@@RoadsideCoder yeah!! sure

[@prachikhushal9138]

@@RoadsideCoder sir, can you please explain me how to set input field to empty after submit.

[@RoadsideCoder]

Contact me on instagram @RoadsideCoder

[@prachikhushal9138]

@@RoadsideCoder ok sir

[@nibsprogramming7794]

Thank you for explaining

[@VAISSAMARTHHCHINIVAR]

Awesome tutorial 🙏

[@RoadsideCoder]

Thank you 🙌

[@anubhapant5227]

Please bring more redux-based projects.

[@RoadsideCoder]

Yes definitely

[@varsa1198]

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

[@amirchappalwala1568]

Thank you so much man....this was really helpful

[@varsa1198]

@@amirchappalwala1568 glad I could help

[@akarshankumar431]

Remove array, u mean that [] brackets right?? at 18:45?

[@akarshankumar431]

Also can u share it here, pliz? I am having the same problem

[@ankitasingh734]

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; } }

[@rangabharath4253]

awesome bro

[@justp5924]

Thank you❤

[@aashishrana6882]

Thanks brother'

[@monkeystylle]

Awesome tutorial man.. can you do a Redux-Saga tutorial..

[@RoadsideCoder]

Definitely!

[@monkeystylle]

thank you.. i already subbed =)

[@asishtammana5305]

what is the use of initialState in store.js file? we have never used it in the code

[@tejalbhavsar4610]

greate video it can be more of it if you explained about thung littile big thogh

[@RoadsideCoder]

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

[@siemen_subbaiah]

what's the preferred way? is it the redux tool-kit way or this method

[@RoadsideCoder]

Both have their own use cases, but toolkit is easier I believe.

[@RGalex15]

Please, could you activate the subtitles, I want to translate it into Spanish. Muchas gracias por tus videos, estoy comenzando con MERN.

[@maxwelochieng7658]

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.

[@shashankjaiswal3653]

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"

[@zainbutt6270]

Hey, what's the difference between Npx and Npm create-react-app. Couldn't find a good explanation on Google. Thanks

[@RoadsideCoder]

I think npx is mostly used to fetch boilerplate packages..

[@therksingh]

Nice ❤

[@shruthiguru9520]

could you please share the source code for this?

[@mrrishiraj88]

🙏👍

[@cs3048]

Add captions bro

[@walideker2253]

it says action is not defined gyes plzz can u help me

[@DeepakGupta-pz4fx]

Redux saga and Redux thunk please make on video

[@RoadsideCoder]

Definitely!

[@abhishekchhipa9585]

ive witeen the same code but , upon entering the todos list is not showing up ,help

[@RoadsideCoder]

Try to compare your code with mine, must be some typo.

[@mdashiqurrahman2665]

plz make a tutorial for redux toolkit

[@RoadsideCoder]

Sure!

[@venkatesh2788]

Full seo, I don't know about meta tags..

[@RoadsideCoder]

Next video will be on how u can improve react app's SEO

[@DivyaPrakash-bj6zk]

Bro createStore is not available. What to do now. I guess react redux has been updated.

[@shaikharbaz1022]

Now you can use configureStore

[@trazhcode6882]

plzz make chat app and shopping cart with redux

[@RoadsideCoder]

Yes The Chat App in planning stage.. Coming soon

[@trazhcode6882]

@@RoadsideCoder thank uu

[@akarshankumar431]

Hey when i Click on Add/Go button, the page reloads, but the todo doesn't show up, can anyone help?

[@RoadsideCoder]

Cam u compare your code with mine? Must be some typo.

[@akarshankumar431]

@@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'

[@akarshankumar431]

@@RoadsideCoder can ya help pliz?

[@PrinceArtbees]

@@akarshankumar431 I Thing Your Code Is Wrong

[@deepakgupta2084]

redux thunk pr video bna do

[@RoadsideCoder]

Sure 👍

[@niklausmikaelson7332]

Brain shake

[@coka2596]

It's "okay" tutorial but I don't like how he uses logic inside of an action.

[@akshayv3601]

not beginner friendly

[@premobratabiswas1657]

exactly

[@DeepakGupta-pz4fx]

Github code???

[@RoadsideCoder]

Description

[@DeepakGupta-pz4fx]

@@RoadsideCoder niii mil rha bhai description pr

[@suranjanaghosh4469]

Too fast, not understanding as a beginner.

[@sharidansari2852]

bhay tum hindi me nhi padha sakte yar hindi me padhate to bhut subscribers hote tumhare

[@asrnyagmur9802]

not liked

[@aashishrana6882]

Thanks brother'

[@aashishrana6882]

Thanks brother'