Shared State: The Problem a Store Solves
Understand what state is in an interface, why sharing it between components gets complicated and what problem a global store solves before using Zustand.
Zustand Concepts
Learn the Zustand concepts (store, create, set, get, actions and selectors), its data flow and how it compares with Redux Toolkit and Context.
Zustand Setup in Next.js
Set up Zustand in Next.js step by step: installation, TypeScript typing, store location by feature, use in Client Components and the care needed with the server.
Zustand Capabilities
Explore what Zustand allows: selectors and useShallow, async actions, middleware (devtools, persist, immer), slices and use outside React.
Practical Case: Session and Notifications with Zustand
Practical case: migrate the week 12 login session to a Zustand store with persistence and build a notification system with delivery criteria.
Slides of the Week
Review the week 13 slides on shared state, Zustand in Next.js, selectors and async actions using the embedded PDF viewer.