https://github.com/foveluy/rectx
a light-weight state manager.
https://github.com/foveluy/rectx
javascript react redux
Last synced: about 1 year ago
JSON representation
a light-weight state manager.
- Host: GitHub
- URL: https://github.com/foveluy/rectx
- Owner: Foveluy
- License: mit
- Created: 2018-04-20T08:43:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T15:58:16.000Z (over 3 years ago)
- Last Synced: 2023-10-20T19:53:08.235Z (over 2 years ago)
- Topics: javascript, react, redux
- Language: JavaScript
- Homepage:
- Size: 2.96 MB
- Stars: 176
- Watchers: 9
- Forks: 15
- Open Issues: 20
-
Metadata Files:
- Readme: README.CN.md
- License: LICENSE
Awesome Lists containing this project
README
# Rectx
> React + Context -> Rectx, 轻量级状态管理库。
## 安装
```bash
npm install --save rectx
```
## 简单使用
```js
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 = () => (
{
like.setState({ isMount: true })
}}
>
{like => (
like.handleClick()}>Click me
{like.state.isMount ? 'component being loaded' : 'component not loaded'}
{like.state.isLike ? 'I love you' : 'I hate you'}
)}
)
ReactDOM.render(
,
document.getElementById('root')
)
```
现在我们已经完成了一个非常简单的例子。在这个例子中，我们定义了一个 LikeMachine 状态机，用于保存 Like 组件所需要的一切状态。
## 意义何在？
让我们认真的观察一下这段简单的代码，很快你就能发现其中的奥妙：
```js
class LikeMachine extends Machine {
state = {
isLike: false
}
handleClick = () => {
this.setState({
isLike: !this.state.isLike
})
}
}
const Like = () => (
{like => (
like.handleClick()} />
{like.state.isLike ? 'I love you' : 'I hate you'}
)}
)
```
发现了吗？只要使用 `` 对组件进行包裹，那么这个组件就拥有了监听状态变化的能力。没错，这其实还是 PUB/SUB 模式的一种，但是相对于 Redux 我们更好理解。因为，我们依旧在使用 ``setState API `` 。