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.

new ManagedReducer('stateObject', [])
  .addActionHandlers({
    ...
    'ACTION_IDENTIFIER': (state:any, action:IAction) => {
      ...
      return state;
    }
    ...
  })

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.initialize(instance => {
  instance.initialState = initialState;
  instance.addReducers([
    ...
  ]);
});

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

import {bootstrap} from 'angular2/platform/browser';
import {REDUX_PROVIDERS} from 'angular-redux';
import {RootComponent} from "./components/root.component";
 
bootstrap(
  RootComponent,
  [
    ...
    REDUX_PROVIDERS
  ]
);

Configuration

Minimum required configuration of a store consists of the initial state and at least one reducer.

const initialState = {
  ...
};
 
const store = ManagedStore.initialize(instance => {
  instance.initialState = initialState;
  instance.addReducers([
    ...
  ]);
});

Decorator

Configure via decorator parameters

@ConnectToStore(
    state => Map().set('genres', state.get('genres')),
    dispatch => bindActionCreators(actions, dispatch)
)
export class StoreComponent {
    ...
}

Configure via prototype functions

@ConnectToStore()
export class StoreComponent {
  ...
 
  mapDispatchToTarget(dispatch) {
    return bindActionCreators(actions, dispatch);
  }
 
  mapStateToTarget(state) {
    return Map().set('genres', state.get('genres'));
  }
 
  ...
}

Injected Provider

export class StoreComponent {
    constructor(connector: Connector) {
      const storeConnector = connector.map(
        state => Map().set('genres', state.get('genres')),
        dispatch => bindActionCreators(actions, dispatch)
      );
      storeConnector.connect(this);
      this.store = storeConnector.store;
    }
    ...
}