ng-state
  • Introduction
  • Main differences
  • Getting Started
    • Instalation
    • Examples
  • Core concepts
    • Main idea
      • More complex flow visualization
    • Configuration
      • Immer Setup
      • ImmutableJs Setup
    • Store
      • Operators
      • Optimistic updates plugin
      • Optimistic updates plugin
      • Form manager plugin
        • onChange hook
        • shouldUpdateState hook
        • Custom form elements
      • Persist state plugin
        • Configuring custom storage
    • Actions
      • Immer
      • ImmutaleJs
      • Injectable Actions
    • Components with Actions
      • Signal Actions
      • State Actions
    • @InjectStore decorator
    • @WithStore decorator
    • @ComponentState decorator
    • Dispatcher
  • Different scenarios
    • Passing list item index via router
    • ngOnChanges hook
    • FormManager pitfalls
  • Unit testing
    • Setup
    • Test store
    • Test actions
    • Test component with actions
    • Test with Angular TestBed
  • Debugging
    • Setup
    • Redux DevTools
    • Automated changes output
    • Manual state changes check
    • Additional debugging information
  • Production
    • Production mode
    • Server Side Rendering (SSR)
  • Other information
    • Best practices
    • CLI
      • Custom Configurations
    • Performance
    • Blog Posts
    • Contributing
Powered by GitBook
On this page
  • Signal actions
  • State actions

Was this helpful?

  1. Core concepts
  2. Actions

Immer

Data Strategy

Signal actions

import { Store, HasSignalStore, InjectStore } from "ng-state";
import { TodoModel } from "./todo.model";

@InjectStore('todos')
export class TodosStateActions extends HasSignalStore<List<any>> {
    addTodo(item: TodoModel) {
        this.store.update(state => {
            state.push(item);
        })
    }

    deleteTodo(index: number) {
        this.store.update(state => {
             if (index > -1) {
                state.splice(index, 1);
            }
        });
    }

    get todos() {
      return this.state();
    }
}

State actions

todos.actions.ts
import { Store, HasStore, InjectStore } from "ng-state";
import { TodoModel } from "./todo.model";

@InjectStore('todos')
export class TodosStateActions extends HasStore<List<any>> {
    addTodo(item: TodoModel) {
        this.store.update(state => {
            state.push(item);
        })
    }

    deleteTodo(index: number) {
        this.store.update(state => {
             if (index > -1) {
                state.splice(index, 1);
            }
        });
    }

    get todos() {
        return this.store.map((state) => {
            return state;
        });
    } // async way

    /// OR

    get todos() {
      return this.state;
    } // non async way
}
PreviousActionsNextImmutaleJs

Last updated 8 months ago

Was this helpful?