Zustand FULL COURSE in 2024 | Simple React/NextJS Redux Alternative
Learn Zustand in 2024 – The Simple, Fast Redux Alternative for React & Next.js
Get the complete source code and build along.
About this course
Take your React and Next.js state management skills to the next level with this complete Zustand course. From beginner-friendly introductions to advanced middleware techniques, this course covers everything you need to build fast, scalable, and maintainable applications. Learn why developers are moving away from Redux to Zustand for simpler, more efficient state management.
You’ll start by understanding the core concepts of Zustand, set up your environment with Vite and TailwindCSS, and gradually build real-world applications using stores, slices, and advanced middleware like Immer, Selectors, DevTools, persistence, and async actions. This course is perfect for beginners who want to learn modern state management and for experienced developers aiming to streamline their React, Next.js, Astro, or Gatsby apps.
What you’ll learn:
Core concepts of Zustand and how it differs from Redux
Setting up Zustand with React, Next.js, and TailwindCSS
Creating stores and slices for clean state organization
Using Immer for immutable state updates
Leveraging selectors and useShallow for optimized renders
Debugging with Zustand DevTools
Enhancing stores with subscribeWithSelector and Persist middleware
Handling async actions and side-effects with Zustand
📚 Chapters 👇
00:00 – Intro
00:17 – What is Zustand
01:02 – Vite & TailwindCSS Setup
07:32 – Zustand Installation & Counter Store Example
21:01 – Zustand Slice
01:01:44 – Zustand Immer Middleware
01:06:06 – Zustand Selectors
01:10:37 – Zustand useShallow
01:15:01 – Zustand DevTool Middleware
01:18:28 – Zustand subscribeWithSelector Middleware
01:28:22 – Zustand Persist Middleware
01:33:05 – Zustand Async Action
