dispatch.md

How to use dispatch method

The dispatch method is used to dispatch an action to the store instance. An action is an object that describes the changes that need to be made to the state. The dispatch function returns the dispatched action object.

Here's an example of how to use the dispatch method:

import { Component } from '@angular/core';
import { NgRedux } from '@angular-redux2/store';
import { increment } from './actions';

interface AppState {
  count: number;
}

@Component({
  selector: 'app-root',
  template: `
    <h1>Count: {{ count$ | async }}</h1>
    <button (click)="onClick()">Increment</button>
  `,
})
export class AppComponent {
  count$ = this.ngRedux.select<number>('count');

  constructor(private ngRedux: NgRedux<AppState>) {}

  onClick() {
    this.ngRedux.dispatch(increment());
  }
}

In the example above, we have defined an action creator increment() that creates an action object with type INCREMENT. When the onClick() method is called, it dispatches the increment() action object to the store using the dispatch method.

The dispatch method takes an action object as a parameter and dispatches it to the store. If the store instance is not initialized, an error is thrown.

By default, the dispatch method runs in the Angular zone to prevent unexpected behavior when dispatching from callbacks to 3rd-party.

import { Component } from '@angular/core';
import { NgRedux } from '@angular-redux2/store';
import { increment } from './actions';

interface AppState {
  count: number;
}

@Component({
  selector: 'app-root',
  template: `
    <h1>Count: {{ count$ | async }}</h1>
    <button (click)="onClick()">Increment</button>
  `,
})
export class AppComponent {
  count$ = NgRedux.store.select<number>('count');

  constructor() {}

  onClick() {
      // using static access 
      NgRedux.store.dispatch(increment());
  }
}

How to use Dispatch decorators

The @Dispatch decorator is used to automatically dispatch the return value of a decorated function to the Redux store using ngRedux.dispatch(). Here is an example of how to use the decorator:

import { Dispatch } from '@angular-redux2/store';

@Component({
  selector: 'my-component',
  template: '<button (click)="onClick()">Add Item</button>',
})
export class MyComponent {
  @Dispatch()
  onClick(): { type: 'ADD_ITEM', payload: any } {
    return { type: 'ADD_ITEM', payload: { name: 'New Item' } };
  }
}

In this example, the onClick() function is decorated with @Dispatch(). Anytime the onClick() function is called (in response to a button click, for example), its return value will automatically be dispatched to the Redux store using ngRedux.dispatch().

The @Dispatch decorator returns a new PropertyDescriptor object, which can be used to replace the original method with the new wrapped method. If the original method is undefined (for example, if the decorated method is an arrow function or a bound method), then the @Dispatch decorator will define a new getter/setter pair for the decorated method.

Note that the decorated method should return an object with a type property that corresponds to a known action type in your application. The payload property can be any data that you want to pass along with the action.

This decorator assumes that the component instance has an ngRedux property that refers to a valid NgRedux instance. If the component instance does not have an ngRedux property, an error will be thrown.

How to use Dispatch with Reducer-Class

export class MyReducer extends AbstractReducer {
    static override actions: ReducerActions<MyReducer>;
    // ...
}

see reducer.md

@Component({
  selector: 'my-component',
  template: '<button (click)="onClick()">Add Item</button>',
})
export class MyComponent {
    @Dispatch()
    onClick(): AnyAction {
        // { type: 'ADD_ITEM', payload: { name: 'New Item' } }
        return MyReducer.actions.addItem({ name: 'New Item' });
    }
}

This will dispatch actions to the store that correspond to the action functions defined in the actions property.