a1-redux

Angular >=1.5 and redux

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
a1-redux
0.1.07 years ago7 years agoMinified + gzip package size for a1-redux in KB

Readme

a1-redux
Angular 1.x with redux the right way.

TODO

  • x add unit test on browser.
  • x support register library with propTypes checking.
  • x unit test for store.register and handle action.
  • x container directive
  • example todo

How to use the library? Where is the document?

For now, please check the unit test in the test directory.

Container directive

The goal is separating between the presentation and the state/logic control.
Potential setup
app.directive('directiveUI', () => ({link: () => {}, template: '<div>ui directive</div>'}));
app.directive('directiveContainerUI', connect({mapStateToScope, mapDispatchToScope}, () => ({template: '<directiveUI />'})));
Is it too cumbersome? and duplicated?

OR we can do the following:

Start with presentation: file directive-present.js:
export default const directiveFactory = ['$service1', '$service2', ($service1, $service2) => {
  return {
    _propTypes_: {
      hello: PropTypes.string,
    },
    link: ($scope, $element, $attrs) {
      // link implementation...
    },
    template: '<div>present directive {{hello}}</div>',
  };
}];

Then the container: file directive-container.js
import directivePresent from './directive-present';
import actions from './actions';
import {connect} from 'a1-redux';

const mapStateToScope = (getState) => ({
  attr1: () => getState().attr1,
  attr2: () => getState().attr2,
});

const mapDispatchToScope = (dispatch, getState) => ({
  dispatch1: (var1, var2) =>  dispatch(actions.forDispatch1({var1, var2})),
})

export default connect({mapStateToScope, mapDispatchToScope}, directivePresent);

Then put in the application: file app.js
import {setup} from 'a1-redux';
import directiveABC from './directive-container';


let app = setup(angular.module('myapp', []));
app.directive('directiveABC', directiveABC);
//... more ...