redux-2way-binding

redux-2way-binding

Build two way binding with Redux and Immutable.

Redux is a predictable state container for JavaScript apps.
Immutable neatly packages immutable equivalents to JavaScript's Objects and Arrays.

Get Started
===============

Three step to set 2-way binding:
1. createReducer:
----------------
``js
import { bindingStore } from 'redux-2way-binding';
import Immutable from 'immutable';

const initialState = Immutable.fromJS({
// ...
});

export default bindingStore('users', initialState, {
// ...
})
`

2. setStore:
-------------
`js
import { bindingMixin } from 'redux-2way-binding';

@bindingMixin
export default class UserManager extends Component {
constructor(props) {
super(props);
this.setBinding('users');
}
}
`

3. binding:
-----------
`js
render() {
const { users } = this.props;

return (



)
}
`

Manual Change Functions
==========
Help user to set reducer by path and value or function,avoid to write more actions.

1. Manual change a reducer by path and value:
--------------
`js
this.manualChange('name', 'john');
`
2. Manual change a reducer by path and covert function:
--------------
`js
this.manualChange('age', function(age) {
return ++age;
});
`

Usage
==========
`sh
$ npm install redux-2way-binding
`
Run example
==========
`
$ cd example
$ npm install
$ gulp dev
`

Note
==========

The component will be used to binding must have 2 props.
One is dispatch that is created by redux.
Another is the store which to be set in "this.setBinding('users')"`.