This Angular SPA uses Tailwind, Reactive Stores, Zustand, and View Models to demonstrate the beauty and benefit of reactive state management (RSM) in Angular.
This repository provides a MovieSearch Angular application that demonstrates implementation and use of Zustand "Reactive Stores"
The store movies-store.ts is implemented with the Zustand library + middleware. Here are the major highlights:
- Centralized, state management that
- Easily implements a ViewModel
- Supports computed properties like
filteredMovies - Easily wraps the Zustand store in an injectable service
MoviesStore
- Zustand Middleware:
- Persists to localstorage
- Immutable store using ImmerJS
- Support for Redux Dev Tools
This repository contains labs and solutions for implementing Reactive State Management (RSM) within the Angular MovieSearch application using either:
- @ngneat/Elf: branch
store-elf-start - Zustand: branch
store-zustand-start
Reactive State Management (RSM) uses a Facade-Store-DataService engine and publishes a ViewModel for consumption in the UI layers.
See the diagram below for illustration:
The repo "start" branch solution uses mock data with a useMovieFacade hook and does not use any reactive state management.
To implement the Reactive State Management (RSM) code, your work will require you to:
- use the
MoviesDataServiceinstead of mock data - implement the reactive
MoviesFacadeand theMoviesStore, and - fix the
useMovieFacade
As you implement the RSM code in the business layer, you will deliver significantly powerful features WITHOUT changing the UI code... that is HUGE! > All the power of RSM is hidden inside the business layer.
In fact, we can easily replace the Elf-based RSM solution with Zustand...without changing the UI or view models.
With well-defined ViewModel APIs, we have a separation of concerns (SoC) between the UI and business layers. And this SoC means that we can implement the UI in parallel with the RSM data-access engine.
- Run locally
npm i && npm start
