DOCSEARCHbyAlgolia
Submit Docs

NGXS Store

repository·master·Indexed 25 days ago

https://github.com/ngxs/store

A state management library for Angular designed to reduce boilerplate and simplify developer experience through a pattern-based approach. It provides tools for defining actions, managing state containers via the @State decorator, and retrieving state using Observables, Angular Signals, or snapshots. The library includes support for memoized selectors, dynamic selectors, and a separate NGXS Labs organization for experimental extensions.

Tokens
86.2K
Snippets
230
Records
411
Agent score
36%

What's inside NGXS

  2. Overview of NGXS State Management

    master
    NGXS is a state management pattern and library designed for Angular applications. It serves as a single source of truth for application state and uses the CQRS (Command Query Responsibility Segregation) pattern to ensure predictable state mutations. Unlike Redux or NgRx, NGXS leverages modern TypeScript features like classes and decorators to reduce boilerplate code.

  3. Use the @ngxs/router-plugin

    master
    The @ngxs/router-plugin is a plugin for NGXS that integrates the Angular Router with the NGXS store. It allows you to synchronize router state with your NGXS state tree, enabling you to react to navigation events and manage routing information within your global state.

  4. Understand the NGXS Action Life Cycle

    master

    NGXS treats actions as a finite state machine. Every action moves through one of four states: DISPATCHED, SUCCESSFUL, ERRORED, or CANCELED.

    When you call store.dispatch(new MyAction()), NGXS emits an ActionContext with a status of DISPATCHED. Once the action handlers complete successfully, a new ActionContext is emitted with the status SUCCESSFUL. This triggers the observable returned by the dispatch method. If a handler throws an error, the status becomes ERRORED.

  5. Understand the rationale for NGXS Action dispatching

    master

    NGXS uses Action classes for dispatching rather than direct method calls on State classes to maintain several core capabilities:

    1. Global State Integrity: Dispatching actions allows NGXS to manage the global state and slice specific portions for methods without losing the connection to the central store.
    2. Debugging and Tooling: Action dispatching enables rich debugging capabilities and hot reload support.
    3. Action Sharing: Using actions allows you to easily share logic and triggers between different states and higher-order states.

  6. Use @ngxs/form-plugin for Angular form management

    master
    @ngxs/form-plugin is a plugin for NGXS that provides specialized tools for managing Angular forms within your NGXS state. It allows you to sync form state with your NGXS store, making it easier to handle complex form structures and validation states.

  7. Explore NGXS Labs

    master

    NGXS Labs is a collection of community-driven libraries that augment the main framework. These libraries are experimental and evolve independently from the core @ngxs/store library.

    Notable Labs packages include:

    • @ngxs-labs/entity-state: For managing entity-based state.
    • @ngxs-labs/testing: Testing utilities.
    • @ngxs-labs/immer-adapter: Adapter for using Immer with NGXS.
    • @ngxs-labs/dispatch-decorator: Decorator for dispatching actions.
    • @ngxs-labs/select-snapshot: Decorator for selecting state snapshots.

  8. Understand the core NGXS concepts

    master

    NGXS is built around four major concepts that create a circular control flow:

    1. Store: Acts as the global state container, the action dispatcher, and the selector provider.
    2. Actions: Classes that describe a specific action to be taken along with any associated metadata.
    3. State: Class definitions that represent specific slices of the application state.
    4. Selects: Selectors used to retrieve specific slices of state.

    Control Flow Pattern: A component dispatches an Action $\rightarrow$ the Store reacts to the action $\rightarrow$ the component receives updated data via a State Select.

  9. Understand NGXS Labs

    master
    NGXS Labs is a separate GitHub organization used to host experimental libraries and community-driven extensions that augment the core @ngxs/store framework. This allows for rapid innovation and experimentation without compromising the stability of the main NGXS core. Once a Labs project stabilizes and gains significant adoption, it may be moved to the main ngxs organization.

  10. Use Exposed Internals for Advanced Development

    master
    NGXS exposes certain internal API implementations to allow library authors to experiment with advanced extensions. These symbols are marked with a ɵ prefix, indicating they are not part of the official API and are subject to change without notice. Use these only if you are building advanced utilities or custom plugins that require access to internal types or configurations.

  12. Introduction to the NGXS Todo Tutorial

    master

    This tutorial guides you through building a Todo application to learn the core concepts of NGXS. You will learn how to:

    • Install NGXS into an Angular project using schematics.
    • Use Actions to represent user interactions and data fetching.
    • Use State to manage application data.
    • Use Selectors to retrieve and display data within components.

    The tutorial starts with a static application that you will progressively transform into a dynamic, state-managed application.