From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Setting up Redux project
From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js
Setting up Redux project
Hello and welcome back. For starting off with our counter example, we are first going to do the basic steps. The first steps include to create a project and in that project we are going to add the redex based dependencies. So let's get to work. The first thing is we need a project. So I'm going to do the command npx create-read at latest and we are going to give it a counter redex app. We'll select react and type script and our project has been created. We can do npm install, oops, we have to go to that directory first. And inside that directory, we have to do npm install. It's going to take a while. Alright, we can clear the rest and we can do code space dot to open this code inside Now, we need to do a few cleanup activities. We can delete this app.css file. We are not going to need it. Then inside the app.tsx, we can get rid of this code. We are not going to need that default code anymore. Now the next step is going to be to have Redux and Tailwind installed in our application. So…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
(Locked)
Introduction and recap: Local state and global state7m 6s
-
(Locked)
useState and useContext: Recap and pitfalls5m 56s
-
(Locked)
Problems solved by global state libraries7m 26s
-
(Locked)
Problems without global state: Summary5m 13s
-
(Locked)
Lifting state up: Recap3m 17s
-
(Locked)
Advanced scenario 1: Multiple dependents6m 46s
-
(Locked)
Advanced scenario 2: Derived state8m 14s
-
(Locked)
Summary2m 8s
-
(Locked)
Context API: Recap4m 48s
-
(Locked)
Best practices2m 48s
-
(Locked)
Performance considerations3m 35s
-
(Locked)
Introduction to Redux5m 6s
-
(Locked)
Setting up Redux project4m 17s
-
(Locked)
Setting up types for action6m 1s
-
(Locked)
Setting up actions for counter6m 18s
-
(Locked)
Setting up reducer for counter6m 52s
-
(Locked)
Setting up Redux store8m 20s
-
(Locked)
Counter component11m 50s
-
(Locked)
Introduction to RTK2m 29s
-
(Locked)
Real-world analogy: Key concepts3m 58s
-
(Locked)
Store setup14m 36s
-
(Locked)
Reducer setup8m 25s
-
(Locked)
Custom hook and component setup11m 4s
-
(Locked)
Plug new store and dev tools demo5m 51s
-
(Locked)
Introduction to async thunk in RTK2m 44s
-
(Locked)
Explanation of code with async thunk and slice5m 8s
-
(Locked)
Fetch users function11m 7s
-
(Locked)
User slice setup7m 19s
-
(Locked)
Users component and demo8m 25s
-
(Locked)
RTK Query: Introduction2m 50s
-
(Locked)
Reselect usage and demo7m 37s
-
(Locked)
Caching and refetching comparison6m 41s
-
(Locked)
useSelector problems7m 22s
-
(Locked)
Generated hooks and example7m 8s
-
(Locked)
Benefits of Reselect1m 39s
-
(Locked)
Custom middleware: Introduction8m 15s
-
(Locked)
Analytic middleware example2m 19s
-
(Locked)
Benefits and summary1m 31s
-
(Locked)
Challenges with large apps2m 42s
-
(Locked)
Domain-based example2m 24s
-
(Locked)
Benefits of structured stores1m 58s
-
(Locked)
Redux alternatives3m 44s
-
(Locked)
Zustand code example8m 15s
-
(Locked)
Jotai code example11m 41s
-
(Locked)
Recoil code example14m 39s
-
(Locked)
Comparison: When to use which3m 17s
-
(Locked)
Introduction to server state management4m 28s
-
(Locked)
TanStack React Query example4m 25s
-
(Locked)
SWR (Stale-While-Revalidate) example3m 18s
-
(Locked)
Comparison between TanStack and SWR4m 34s
-
(Locked)
Project overview6m 27s
-
(Locked)
Project setup and installations5m 13s
-
(Locked)
Store setup and API5m 31s
-
(Locked)
Products list component6m 52s
-
(Locked)
Product card component7m 49s
-
(Locked)
Cart slice8m 48s
-
(Locked)
Cart component19m 5s
-
(Locked)
App component6m 50s
-
(Locked)
Server-side sync5m 12s
-
(Locked)
-