ngDux API Documentation - General

ng-dux.shallowCompare

shallow compare two objects

Kind: static constant of ng-dux
Example

 import {shallowCompare} from "ng-dux";
 
  const commonObject = {
    x: 1
  };
  const objA = {
    someProp: "nothing",
    anyProp: "something",
    someObject: commonObject
  };
  const objB = {
    someProp: "anything",
    anyProp: "something",
    someObject: commonObject
  };
  const objC = {
    anyProp: "something",
    someObject: commonObject,
    someProp: "nothing"
  };
 
  console.log(shallowCompare(objA, objB)); // false
  console.log(shallowCompare(objA, objC)); // true
  console.log(shallowCompare(objC, objB)); // false

ng-dux.ngDux : string

The module name

Kind: static constant of ng-dux
Example

 import {ngDux} from "ng-dux";
 
 angular.module("myExampleModule", [ngDux, ...otherDeps]);

Injectable Services and Providers

Use ngDuxProvider to configure your ngDux binding service.

Kind: global Angular Provider

ngDuxProvider.setStore(store)

setStore is only available during the config phase of the angular application. You might want to take care to set the store using the Provider in the config phase, since it can’t be changed at a later point of time! Use setStore(yourStore): In case you want to reuse the store (eg. for binding to react components), you can simply use ngDux.getStore() to retrieve the same store instance that is being used in your angular components. Using a different store instance for e.g. react components would lead to state, that won’t stay in sync across angular and react components. So: If you want to integrate react components (or any other UI library/framework) seamlessly into an AngularJS application, they NEED to use the same (!) instance of the store!

Kind: instance method of ngDuxProvider

Param Type
store ReduxStore

Example

import {ngDux} from "ng-dux";

// import or create your redux store instance somewhere here...
// e.g.
 import {createStore} from "redux";
 const store = createStore(function reducer(state, action) {
   return {
     ...state,
     [action.type]: "was dispatched"
   };
 }, {
   //your default state
 });

angular.module("yourExampleAppModule", [ngDux]).config(["ngDuxProvider", function(ngDuxProvider) {
  ngDuxProvider.setStore(store);
}]);

Kind: global Angular Service
Requires: module:$rootScope

ngDux.connect([mapStateToProps], [mapDispatchToProps], [shouldMapUpdate]) ⇒ Connector

creates a Connector function, that you can use to connect a controller instance with the provided mappings to a Redux store. ngDux#connect the function returned is reuseable and can be passed to child components by their angular bindings, to reuse this mapping.

Kind: instance method of ngDux
Returns: Connector - Connector

Param Type Description
[mapStateToProps] mapStateToProps Function that returns an Object with properties that were retrieved from the state.
[mapDispatchToProps] mapDispatchToProps Function that returns an Object with functions to dispatch actions to the store.
[shouldMapUpdate] shouldMapUpdate Decide whether the mapping should be recalculated and updated for a new state or not.

ngDux.Connector : function

Function that will connect your Component controller instance to the store

Kind: static typedef of ngDux

Param Type
bindingTargetInstance BindingTarget