React Redux Todo App Tutorial | Learn Redux with Redux Toolkit

Показать описание

In this video I will teach you all how to code a CRUD (Create, Read, Update, Delete) application using Redux in React. I use redux toolkit to make this happen and you will have a good understanding of material ui (mui), learning about the different parts that make up redux, how to structure state and destructure objects.

Go to Chapter :
00:06 Demo
02:36 Start Implementation
07:27 Create Todo Component
13:02 Show multiple Todos
17:39 Conditional rendering
19:33 Add new Todo Button
21:08 Create a new Todo
23:30 Pass data as props (parent to child)
28:30 Redux Introduction
29:49 Redux vs Context
30:45 Redux Setup
33:19 Pass data as children
36:04 What is Reducer?
40:35 Read state from Redux store (useSelector hooks)
43:16 Add new Todo
54:32 Maintain new state from todo form
56:40 On change event
01:02:24 Dispatch a action (useDispatch hooks)
01:08:24 Delete Todo
01:12:04 Pass data from child to parent
01:13:25 Update todo
01:19:46 Reset from data
01:32:11 summarise

GitHub Code
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Concept Covered
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- How to perform crud operation using hooks in React
- Learn Redux from basic
- Learn Material UI design (MUI)
- React material ui form design (textfield, input) responsive
- Learn pop up modal window design

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- React project
- material ui react (mui react)
- Todo React Redux Todo App
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#codenemy #React #Redux #Project

Рекомендации по теме

Комментарии

Bhai ek baat batao... Material ui table me maan lo 3 field hai.. field1, field2, field3 hai.. hum field1 * field2 ko field3 me store karna chahte hain. to jaise bhi field1 and field2 me value dale field3 automatically update ho jaye.. kaise karna hoga?

PramriDesigns

Hi Sir, @Codenemy

I want to know one thing, do you have any video for adding the notification bell icon with badge which will show the activities of all pages.

yashaswisharma

Please make a video on material-table crud operation using redux taking data from json server

arindammaji

This application is NOT using Redux Toolkit, please take it out of the title. If you want to use Redux Toolkit make a seperate todolist application using Redux Toolkit for the community and your subscribers to learn from and use. Using Redux Toolkit is the reccomended way to implement redux now days to make everything much more simple and easy. Thanks.

lewisnt_

Hi, does ag-grid-enterprise support vertical headers? thanks

yuzhang

Plz upload regular videos on javascript & react js

alishresht

React Redux Todo App Tutorial | Learn Redux with Redux Toolkit

React Redux Todo App Tutorial for Beginners | Learn React Redux 2024

React Redux Todo App Tutorial | Learn Redux with Redux Toolkit

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

TodoApp using React and Redux #1 Create and Read Data

Complete React Tutorial (& Redux) #23 - Todo App (part 1)

Redux Todo App Tutorial - React Redux Beginner Tutorial on creating a Todo List App

Building a Todo List App with Redux 😍 | ( React-Redux ) Tutorial For Beginners

Todo App with React , Redux and Typescript

Todo App with React Redux Toolkit | React Redux Tutorial

Build a ToDo List app with react redux-toolkit and tailwind css

Build a CRUD App with React.js and Redux Toolkit for Beginners | 'React Redux CRUD App'

A Complete React Todo App using React, Redux, Framer Motion

Building Todo App with React Redux

Build a Todo List App with React Redux

Build a Simple Todo App with React and Redux: A Step-by-Step Tutorial

React Redux Todo app with DSA | Part 1 | Shubham Chhimpa

Build a Responsive ToDo List App with React JS, Redux & Tailwind CSS | Step-by-Step Tutorial #20...

Redux - Complete Tutorial (with Redux Toolkit)

Todo App with React Hooks & Redux using Tailwind for beginners - React Micro Project

React Tutorial 27 - Todo-List with Redux | Editing Todo-List

React Redux Todo App Tutorial | Learn Redux with Redux Toolkit

Complete React Tutorial (& Redux ) #24 - Todo App (part 2)

Mastering Redux Toolkit: Building a Task Management App | React & Redux

Learn Redux Toolkit in under 1 hour