2 ways binding with redux & react & immutable
npm install redux-2way-bindingRedux 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 (
Name:
Age:
Sex:
Name:{users.get('name')}
Age:{users.get('age')}
Sex:{users.get('sex')}
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')"`.