Road To Master Ngrx/Store

A curated guided hyperlinks to learn all there is to know of Ngrx/Store and state management in general

• Content
  • What does state mean?
  • Why the need for a UI state management?
  • Concepts to understand
  • Why choose Ngrx/Store as your "flux capacitor"
  • Building blocks of Ngrx/Store
    • Reducer and its application state
      • meta-programming on reducers
    • Ways to manage the application's state
    • Handling side-effects caused by change of state
    • Actions
    • Gluing and registering actions to reducers
    • Selectors
  • Dev Tools
  • Recommended tutorials
  • Supporting resources
  • Alternatives

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!

What does state mean?

• Understanding UI state ^(5mins)
• What is usually in a state ^(23sec)

Why the need for a UI state management?

• 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)

Concepts to understand

• Principles borrowed from Redux ^(3mins)
• Contains building blocks to implement Flux ^(26secs)
• Prerequisite: must know reactive programming RxJS ^(25mins)

Why choose Ngrx/Store as your "flux capacitor"

• 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

Building blocks of Ngrx/Store

Reducer and its application state

• What is a reducer ^(4mins)
• Designing reducer (although from Redux, it has the exact same pattern) ^(15mins)

meta-programming on reducers

• middle-ware on reducers ^(2mins)

Ways to manage the application's state

• 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)

Handling side-effects caused by change of state

• SO answers the need for ngrx/effects ^(9mins)
• Pro-tips on when and how to use effects ^(6mins)
• Controlling lifecycle of effect ^(40secs)

Actions

• Creating actions ^(10mins)
• Three categories of action ^(1min)
• Use several actions to convey an interaction ^(2mins)

Gluing and registering actions to reducers

• Using ActionReducerMap ^(24secs)

Selectors

• All you need to know about selectors

Dev Tools

• store devtools browser extension - allows you to monitor events and chart the state. To have it working with ng-cli, see here

Helper Libraries

• 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

Recommended tutorials

• Paid step-by-step tutorial by Todd Motto
• Tour of Heroes tutorial with Ngrx/store

Supporting resources

• 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

Alternatives

• 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.