Skip to content

GaryChangCN/zlp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

zlp

非常简单的 react 数据流工具

安装

npm install zlp

使用

// /store/a.js

import { Store } from 'zlp'

class A extends Store {
    // 在 store 属性里管理数据
    store = {
        data: {
            first: 'hello'
        }
    }

    init () {
        this.setStore('data.first', 'hello world')
    }
}

export default new A()

// /view/a.jsx

import { connect } from 'zlp'
import a from '/store/a'

// 一个组件可以绑定多个 store  a\b\c 都是 store 示例
@connect([a, b, c])
class Index extends React.Component {
    render () {
        return (
            <div>
                <h1>{a.store.data.first}</h1>
                <button
                    onClick = {() => a.init()}
                >click</button>
            </div>
        )
    }
}


// 如果不支持修饰符可以用以下使用方式
export default connect([a])(Index)

TODO

  • chrome devtools

About

非常简单的 react 单向数据流工具

Resources

License

Stars

Watchers

Forks

Packages

No packages published