rectx
Rectx, a light-weight state manager.
Last updated a year ago by snakegear .
Original npm · Tarball · package.json
$ cnpm install rectx 
SYNC missed versions from official npm registry.

Rectx

React + Context -> Rectx, 轻量级状态管理库。

安装

npm install --save rectx

简单使用

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, Controller, Listen } from 'rectx'

class LikeController extends Controller {
    state = {
        isLike: false,
        isMount: false
    }

    handleClick = () => {
        this.setState({
            isLike: !this.state.isLike
        })
    }
}

const Like = () => (
    <Listen
        to={[LikeController]}
        didMount={like => {
            like.setState({ isMount: true })
        }}
    >
        {like => (
            <div>
                <button onClick={() => like.handleClick()}>Click me</button>
                <div>{like.state.isMount ? 'component being loaded' : 'component not loaded'}</div>
                <div>{like.state.isLike ? 'I love you' : 'I hate you'}</div>
            </div>
        )}
    </Listen>
)

ReactDOM.render(
    <Provider>
        <Like />
    </Provider>,
    document.getElementById('root')
)

现在我们已经完成了一个非常简单的例子。在这个例子中,我们定义了一个 LikeMachine 状态机,用于保存 Like 组件所需要的一切状态。

意义何在?

让我们认真的观察一下这段简单的代码,很快你就能发现其中的奥妙:

class LikeMachine extends Machine {
    state = {
        isLike: false
    }

    handleClick = () => {
        this.setState({
            isLike: !this.state.isLike
        })
    }
}

const Like = () => (
    <Listen to={[LikeMachine]}>
        {like => (
            <div>
                <button onClick={() => like.handleClick()} />
                <div>{like.state.isLike ? 'I love you' : 'I hate you'}</div>
            </div>
        )}
    </Listen>
)

发现了吗?只要使用 <Listen to={[LikeMachine]}/> 对组件进行包裹,那么这个组件就拥有了监听状态变化的能力。没错,这其实还是 PUB/SUB 模式的一种,但是相对于 Redux 我们更好理解。因为,我们依旧在使用 setState API

Current Tags

  • 1.3.3                                ...           latest (a year ago)

43 Versions

  • 1.3.3                                ...           a year ago
  • 1.3.2                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.8                                ...           a year ago
  • 1.0.7                                ...           a year ago
  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 0.3.13                                ...           2 years ago
  • 0.3.12                                ...           2 years ago
  • 0.3.11                                ...           2 years ago
  • 0.3.10                                ...           2 years ago
  • 0.3.9                                ...           2 years ago
  • 0.3.7                                ...           2 years ago
  • 0.3.6                                ...           2 years ago
  • 0.3.5                                ...           2 years ago
  • 0.3.4                                ...           2 years ago
  • 0.3.3                                ...           2 years ago
  • 0.3.2                                ...           2 years ago
  • 0.3.1                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 2
This Month 3
Last Day 0
Last Week 3
Last Month 7
Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |