To use ngx-redux in your Angular project you have to import ReduxModule.forRoot() in the root NgModule of your
application.
The static forRoot method is a convention
that provides and configures services at the same time. Make sure you call this method in your root NgModule, only!
By default ngx-redux will bootstrap a Redux Store for you.
Is the app running in devMode, the default store is prepared to work together
with the Redux DevTools.
If you want to add a Middleware like logging, you've to provide a
custom stateFactory.
Ok, now you've to create a interface to describe the structure of your state.
Example
exportinterfaceAppModuleStateInterface{
todo:{
items:string[];
};
}
3. Create a class representing your module state
Before you can register your state to redux, you need to create a class that represents your state. This class is
responsible to resolve the initial state.
As you can see in the example below, the class ...
... is decorated by @ReduxState
You need to decorate your class by @ReduxState and to provide a application wide unique state name to it. If you can
not be sure that your name is unique enough, then you can add a unique id to it (as in the example shown below).
... implements ReduxStateInterface
The @ReduxState decorator is only valid for classes which implement the ReduxStateInterface. This is an generic
interface where you've to provide your previously created AppModuleStateInterface. The ReduxStateInterface compels
you to implement a public method getInitialState. This method is responsible to know, how the initial state can be
computed and will return it as an Promise, Observable or an implementation of the state interface directly.
Note: The method getInitialState is called by ngx-redux automatically! Your state will be registered to the root
state after the initial state was resolved successfully.
Each selector will accept a relative todo/items or an absolute path
/app-module-7c66b613-20bd-4d35-8611-5181ca4a0b72/todo/items. It's recommended to use relative paths only. The
absolute path is only there to give you a maximum of flexibility.
5.1 Using the reduxSelect pipe
The easiest way to get values from the state, is to use the reduxSelect pipe together with Angular's async pipe. The
right state is determined automatically, because you're in a Angular context.
If you want to access the state values in your component you can use the @ReduxSelect decorator. ngx-redux can not
determine which state you mean automatically, because decorators run outside the Angular context. For that you've to
pass in a reference to your state class as 2nd argument. When you specify an absolute path, you don't need the 2nd
argument anymore.
To dispatch an action is very easy. Just annotate your class method by @ReduxAction. Everytime your method is called
ngx-redux will dispatch a Redux Action for you automatically!
The return value of the decorated method will become the payload of the action and the name of the method is used as
the action type.
Note: It's very useful to write a provider, where the action method(s) are delivered by. See the example below.
import{AppActions}from'./app.actions';// (1) Add the import
import{AppComponent}from'./app.component';
import{AppModuleState}from'./app.module.state';
@NgModule({
declarations:[
AppComponent
],
imports:[
BrowserModule,
ReduxModule.forRoot({
state:{
provider:AppModuleState,
}
}),
],
providers:[AppActions],// (2) Add to the provider list
bootstrap:[AppComponent]
})
exportclassAppModule{
}
Now you can inject the provider to your component:
Example
import{Component}from'@angular/core';
import{AppActions}from'./app.actions';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls:['./app.component.css']
})
exportclassAppComponent{
constructor(appActions:AppActions){
appActions.addTodo('SampleTodo');
}
}
The example above will dispatch the following action:
{
"type":"addTodo",
"payload":"SampleTodo"
}
Ok that's cool, but there's no information in the action type that this was an AppActions action, right?
But don't worry you can follow two different and very easy ways to fix that.
One of the principles of Redux is to change the state using pure functions, only. Unfortunately there is
no typescript support to decorate pure functions right now. That's the reason why ngx-redux uses classes where the
reducer functions are shipped by. To find a viable solution the reducer functions shall be written as static methods.