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

Подписаться 113 тыс.

Просмотров 54 тыс.

50% 1

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

Опубликовано:

19 фев 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@zedsmelee Год назад

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

@nibsprogramming7794 2 года назад

Thank you for explaining

@mohitsaud2071 2 года назад

Thank you brother for clearing several concepts of Redux.

@RoadsideCoder 2 года назад

My pleasure 🤘

@PrinceArtbees Год назад

Its Ok Bro No Problem

@VAISSAMARTHHCHINIVAR 11 месяцев назад

Awesome tutorial 🙏

@RoadsideCoder 11 месяцев назад

Thank you 🙌

@justp5924 Год назад

Thank you❤

@rangabharath4253 3 года назад

awesome bro

@asishtammana5305 2 месяца назад

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

@prachikhushal9138 3 года назад

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

@RoadsideCoder 3 года назад

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

@prachikhushal9138 3 года назад

@@RoadsideCoder yeah!! sure

@prachikhushal9138 3 года назад

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

@RoadsideCoder 3 года назад

Contact me on instagram @RoadsideCoder

@prachikhushal9138 3 года назад

@@RoadsideCoder ok sir

@varsa1198 3 года назад

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 3 года назад

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

@varsa1198 3 года назад

@@amirchappalwala1568 glad I could help

@akarshankumar431 2 года назад

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

@akarshankumar431 2 года назад

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

@maxwelochieng7658 2 года назад

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"

@aashishrana6882 5 месяцев назад

Thanks brother'

@anubhapant5227 3 года назад

Please bring more redux-based projects.

@RoadsideCoder 3 года назад

Yes definitely

@shruthiguru9520 Год назад

could you please share the source code for this?

@zainbutt6270 3 года назад

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

@RoadsideCoder 3 года назад

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

@walideker2253 Год назад

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

@fatimaiqra2169 8 дней назад

thanks

@monkeystylle 3 года назад

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

@RoadsideCoder 3 года назад

Definitely!

@monkeystylle 3 года назад

thank you.. i already subbed =)

@tejalbhavsar4610 3 года назад

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

@RoadsideCoder 3 года назад

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

@RGalex15 Год назад

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

@abhishekchhipa9585 2 года назад

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

@RoadsideCoder 2 года назад

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

@siemen_subbaiah 3 года назад

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

@RoadsideCoder 3 года назад

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

@mrrishiraj88 2 года назад

🙏👍

@akarshankumar431 2 года назад

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

@RoadsideCoder 2 года назад

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

@akarshankumar431 2 года назад

@@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 2 года назад

@@RoadsideCoder can ya help pliz?

@PrinceArtbees Год назад

@@akarshankumar431 I Thing Your Code Is Wrong