# gfs-react-redux-twoway-binding

> redux twoway-binding

Latest version **0.1.0** (published 2017-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install gfs-react-redux-twoway-binding
pnpm add gfs-react-redux-twoway-binding
yarn add gfs-react-redux-twoway-binding
bun add gfs-react-redux-twoway-binding
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-01-04 |
| First published | 2017-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | ainiderenxm |
| Maintainers | future_team |
| Keywords | redux, react, binding, twoway-binding |

## Links

- npm: https://www.npmjs.com/package/gfs-react-redux-twoway-binding
- Repository: https://github.com/future-team/gfs-react-redux-twoway-binding
- Homepage: http://github.com/future-team/gfs-react-redux-twoway-binding
- Issues: http://github.com/future-team/gfs-react-redux-twoway-binding/issues
- npm.io page: https://npm.io/package/gfs-react-redux-twoway-binding

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^15.4.1
- [extend](https://npm.io/package/extend.md) ^3.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.1
- [classnames](https://npm.io/package/classnames.md) ^2.1.3
- [@types/react](https://npm.io/package/@types/react.md) ^0.14.55
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^0.14.19

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-01-04

## README

# gfs-react-redux-twoway-binding

数据双向绑定，在React Component中直接改变redux store中数据对象值，达到重新渲染页面的目的，减少编写更多的action；使用时请注意store数据对象必须是immutable类型且次组件是一个装饰类（decorator）

## 安装

```bash

	npm install gfs-react-redux-twoway-binding
```

## 依赖

* `immutable`

## 使用			

### 1. createReducer

创建一个redux store；

```js

	import { createReducer } from 'gfs-react-redux-twoway-binding';
    import Immutable from 'immutable';

    const initialState = Immutable.fromJS({
        name:'init'
    });

    export const test = createReducer('test',initialState, {
        ['QUERY']: (data, action) => {
            return data.merge(Immutable.fromJS(action.data));
        }
    });
```

### 2. setStore

组件与具体的store建立关系；

```js

	import {bindingMixin} from 'gfs-react-redux-twoway-binding';

	//用次组件装饰下面的类
    @bindingMixin
    export default class TestWebContainer extends Component {
        constructor(props) {
            super(props);

            //关联store
            this.setBinding('test');

        }
    }
```

### 3. binding

数据双向绑定，使用`this.binding`方法与具体字段绑定，表单元素发生改变时将直接会改变store中的值；

```js

	render() {
		return (
			<div>
				<input type="text"  valueLink={this.binding('name')  } />
				{this.props.test.get('name') }
			</div>
		);
	}
```

## Manual Change Functions

帮助用户快速根据reducer路径更改store值，避免写更多的action。

* 手动根据路径改变reducer的值:

```js

	this.manualChange('name', 'john');

	this.manualChange('name', function(age){
        return ++age;
    });
```

## Command

```
	#测试	
	npm run test	
	#打包	
	npm run build	
	#例子演示	
	npm start
```

---
_Source: https://npm.io/package/gfs-react-redux-twoway-binding · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._