A curated guided hyperlinks to learn all there is to know of Ngrx/Store and state management in general
- Content
All information is currently base on Ngrx/Store v4
The links that are tagged would lead you to the exact snippet of the linked article that is relevant to the topic. Some post may not have anchors but the whole article should help you in your journey as well. Feel free to skip to the relevant topic or read all of it. The time indicators will be for the prescribed texts only.
Here we go!
- Understanding UI state (5mins)
- What is usually in a state (23sec)
- The motivation (1min)
- A video on the history of how the solution was born - Flux (44:35mins)
- What is the most frequent problem that it (2mins)
- How does it relate to state in Angular SPA? (2mins)
- Principles borrowed from Redux (3mins)
- Contains building blocks to implement Flux (26secs)
- Prerequisite: must know reactive programming RxJS (25mins)
- Advantages (2mins)
- A video on some thoughts why this suits angular (65secs)
- Well opinionated comparison on redux vs ngrx/store (3mins)
Note: There are alternative solutions to ngrx. See the #Alternatives section
- What is a reducer (4mins)
- Designing reducer (although from Redux, it has the exact same pattern) (15mins)
- middle-ware on reducers (2mins)
- Partition state table by featureModule (32secs)
- Using scan Rxjs operator to automatically maintain state updates (2mins)
- Using ngrx/entity to reduce boilerplate in creating entity-type application state (3mins)
- SO answers the need for ngrx/effects (9mins)
- Pro-tips on when and how to use effects (6mins)
- Controlling lifecycle of effect (40secs)
- Creating actions (10mins)
- Three categories of action (1min)
- Use several actions to convey an interaction (2mins)
- Using ActionReducerMap (24secs)
- store devtools browser extension - allows you to monitor events and chart the state. To have it working with ng-cli, see here
NGRX-Actions - Using decorators and class symbols to reduce the boiler-plate(The author is diverting his resources to a new state management library. see Alternatives)- Angular-ngrx-data - Manages entity in a clever black-box
- Nrwl Extensions - Developer toolkit to assist in Ng development, which comes with Ngrx CLI generators
- Ngrx Schematics - Scaffold the cookie-cutter code
- Style guide
- Introduction video by ngrx team
- Core concepts inspired by Redux
- Video by Mike Ryan(lead contributor of Ngrx) describing benefits of ngrx
- Comprehensive Introduction to @ngrx/store by @btroncone
- Example of a minimal setup
- Splitting state by features
- A developers learnings on ngrx
- What's feature module
- NGXS - State management pattern + library made with Angular patterns in mind.
- @angular-extensions/model - Manage state via a single (service-like) API (see here for its motivation).
- angular-redux/store - The cross-over of react-redux. If you have bought into the Redux ecosystem, this is compatible with most existing redux midleware/tools that are not react-specific (see here for a comparison discussion).
- Akita - If you're familiar with CQRS, this may be a good fit for you.
- Overmind - State management that tries to keep it simple.