Quick AngularJS ng-redux integration with UI-Router

README.txt

Quick integration for ng-redux and angularjs 1.x

Motivation: 
For those who...
1. Don't want to connect to redux directly from a controller.
2. Don't want to call redux connect multiple times for each resolve.
3. Don't want to merge multiple resolves to reuse one redux connection.

Explaination:
States.js > Definition for mapStateToResolve. Similar to UI-router resolve but can take in the state and return a mapping to resolves.
Config.js > Hooks into stateProvider for any states that contain mapStateToResolve and adds a UI-Router resolve* for each property.
*The resolve only has one dependency ReduxHelper.js where we can fetch the result of connect when it's ready and changes.
Run.js > Hooks into stateProvider stateChangedStart event to call ReduxHelper.js, nows the time to connect to the store for this state.
ReduxHelper.js > 
    connect: connects to Redux store using the provided mapStateToResolve and stores the results internally using references.
    get: fetches a reference to the results which is updated via $timeout. 

Todo:
Configure default values/references using existing resolves that match mapStateToResolve
Integrate/configure disconnect into UI-router view and resolve lifecycle
Integrate/configure redux-ui-router or something similar

Config.js

app.config(function($stateProvider) {
 
  $stateProvider.decorator('views', function(state, parent) {
    return state.mapStateToResolve ? mapStateToResolve(parent(state)) : parent(state);
  });
  
  //Update resolves with mapStateToResolve resolvers, will return from reduxHelper
  //TODO: If resolve already exists, use it as initial state?
  function mapStateToResolve(views) {
  
    var result = {};
    
    angular.forEach(views, function(config, name) {

        if (!(config && config.$context && config.$context.mapStateToResolve)) {
          result[name] = config;
          return;
        }

        var mapStateToResolve = _.reduce(_.keys(config.$context.mapStateToResolve), function(mapStateToResolve, resolveKey) {
          
          //Add resolve (or replace) with reduxHelper to get current reference to state.
          //TODO: Use existing resolves as initial state?
          mapStateToResolve[resolveKey] = function(reduxHelper) {
            return reduxHelper.get(resolveKey);
          };

          return mapStateToResolve;

        }, {});

        config.$context.resolve = Object.assign(config.$context.resolve, mapStateToResolve);

        result[name] = config;
    })

    return result;
  }
}

ReduxHelper.js

app.factory('reduxHelper', function($ngRedux, $injector, $timeout) {
  var currentState = {};

  return {
    get: function(key) {
      return currentState[key];
    },
    connect: connect
  };

  function connect(mapStateToResolve) {

    return $ngRedux.connect(function(state) {
      
      var mappedState = {};

      _.mapObject(mapStateToResolve, function(resolveFn, resolveKey) {
        mappedState[resolveKey] = $injector.invoke(resolveFn, null, Object.assign({ state: state }, mappedState));
      });

      return mappedState;

    })(mappedState => {

      $timeout(() => updateCurrentStateRefs(mappedState));
      
    });
  }

  function updateCurrentStateRefs(newState) {
    _.map(newState, (value, key) => {
      currentState[key] = currentState[key] ? Object.assign(currentState[key], value) : value
    })
  }
});

Run.js

app.run(function(reduxHelper){

  $rootScope.$on("$stateChangeStart", function(event, next, nextParams) {
  
    if(next && next.mapStateToResolve) {
      var disconnect = reduxHelper.connect(next.mapStateToResolve);
    }
  });
});

States.js

$stateProvider.state('app', {
  url:'/',
  templateUrl : 'index.html',
  controller: 'appController',
  params: {
    id: {
      value: 0,
      squash: true
    }
  },
  mapStateToResolve: {
    items: function($stateParams, state) {
      var id = $stateParams.id || 0;
      return state.items && state.items[id];
    }
  }
})

dat lodashhh

go all the way and swap out Object.assign