angular-redux
Redux helpers for Angular 2
Installation
Install via npm
npm install angular-redux
Usage
API
ManagedReducer
ManagedReducer-class works as a construction object for a store reducer.
constructor(identifier: string, intialState:any, actionHandlers?:Map<string, Function>[])
addActionHandler(identifier: string, handler:Function) => this: ManagedReducer
addActionHandlers(actionHandlers:Map<string, Function>) => this: ManagedReducer
setInitialState(initialState:any) => this: ManagedReducer
create() => reducer: Function
The following example instantiates a reducer for the stateObject-key in root-state.
'stateObject'
ManagedStore
ManagedStore-class works as a construction singleton-object for a redux store.
The store configuration is done via the static initialize
-function.
static initialize(callback) => store: Store
static destroy() => void
The following instance properties are available while configuring the store instance
in the initialize
callback.
initialState: any
middleware: List<Middleware>
getStore() => store: Store
addReducer(managedReducer:ManagedReducer) => this: ManagedStore
addReducers(managedReducers:ManagedReducer[]) => this: ManagedStore
Example store initialization
const store = ManagedStore;
Connector
The Connector-class is used to connect Angular components into the store context. The class prototype consists of three functions, two of which are used only internally during the connector lifecycle.
mapAndValidateState(state:any, mapStateToScope:Function) => newState: any
updateTarget(target:any, state:any, dispatch:Dispatch) => void
map(mapStateToTarget?:Function, mapDispatchToTarget?:Function) => {connect:Function, store:Store}
The map
function is used to hook the connector with state mapping functions. The returned object contains the
connect-function which is used to assign the updated state and mapped actions to the target-object. It also
contains the redux store which can be used after instantiating the Connector.
connect(target:Function|Object) => unsubscribe: Function
As shown, connecting the mapped state to a target function or a target object return the unsubscribe-callback for cleaning up the connection after target disposal.
Providers
The REDUX_PROVIDERS
injectable simply provides the application context with a Connector
factory to be used
in components and directives.
Setup
;;; ;
Configuration
Minimum required configuration of a store consists of the initial state and at least one reducer.
const initialState = ...; const store = ManagedStore;
Decorator
Configure via decorator parameters
@ ...
Configure via prototype functions
@ ... { return ; } { return Map; } ...
Injected Provider
{ const storeConnector = connector; storeConnector; thisstore = storeConnectorstore; } ...