a1-redux

0.1.0 • Public • Published

a1-redux

Angular 1.x with redux the right way.

TODO

  • add unit test on browser.
  • support register library with propTypes checking.
  • unit test for store.register and handle action.
  • 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 ...

Readme

Keywords

Package Sidebar

Install

npm i a1-redux

Weekly Downloads

2

Version

0.1.0

License

BSD

Last publish

Collaborators

  • phucpnt