Distribution for separation of concern between the state management and the view
This package simplifies dispatching process, you shouldn't care about
Store service injection as we provide more declarative way to dispatch events out of the box.
@ngxs-labs/dispatch-decorator run the following command:
yarn add @ngxs-labs/dispatch-decorator
Import the module into your root application module:
@Dispatch() is a function that allows you to decorate methods and properties of your classes. Firstly let's create our state for demonstrating purposes:
After registering our state in the
NgxsModule we are ready to try the plugin out. Given the following component:
As you may mention we don't have to inject the
Store class to dispatch those actions. The
@Dispatch decorator does it for you underneath. It gets the result of the function call and invokes
store.dispatch(...) under the hood.
Dispatchers can be also asynchronous. They can return either
Observable. Asynchronous operations are handled outside of Angular's zone, thus it doesn't affect performance:
Notice that it doesn't matter if you use an arrow function or a normal class method.
Dispatching Multiple Actions
Dispatchers can return arrays. Actions will be handled synchronously one by one if their action handlers do synchronous job and vice versa if their handlers are asynchronous:
If you have an async dispatcher, you may want to cancel a previous
Observable if the dispatcher has been invoked again. This is useful for canceling previous requests like in a typeahead. Given the following example:
If we want to cancel previusly uncompleted
getNovels request then we need to provide the
Business Logic Decomposition with Facades
There is a great article about using facades and the
@Dispatch decorator together to mask interaction with more complex components behind the scenes.