1 | # Rectx
|
2 | [![NPM version][npm-image]][npm-url]
|
3 | [![build status][travis-image]][travis-url]
|
4 | [![Test coverage][coveralls-image]][coveralls-url]
|
5 | [![David deps][david-image]][david-url]
|
6 | [![node version][node-image]][node-url]
|
7 | [![npm download][download-image]][download-url]
|
8 |
|
9 | [npm-image]: https://img.shields.io/npm/v/rectx.svg?style=flat-square
|
10 | [npm-url]: https://npmjs.org/package/rectx
|
11 | [travis-image]: https://img.shields.io/travis/215566435/rectx.svg?style=flat-square
|
12 | [travis-url]: https://travis-ci.org/215566435/rectx
|
13 | [coveralls-image]: https://img.shields.io/coveralls/215566435/rectx.svg?style=flat-square
|
14 | [coveralls-url]: https://coveralls.io/r/215566435/rectx?branch=master
|
15 | [david-image]: https://img.shields.io/david/215566435/rectx.svg?style=flat-square
|
16 | [david-url]: https://david-dm.org/215566435/rectx
|
17 | [node-image]: https://img.shields.io/badge/node.js-%3E=_8.0-green.svg?style=flat-square
|
18 | [node-url]: http://nodejs.org/download/
|
19 | [download-image]: https://img.shields.io/npm/dm/rectx.svg?style=flat-square
|
20 | [download-url]: https://npmjs.org/package/rectx
|
21 |
|
22 | ![](https://github.com/215566435/rectx/blob/master/docs/rectx.png?raw=true)
|
23 |
|
24 | React + Context -> Rectx, a light-weight state manager with mutable api.
|
25 |
|
26 | ## React version requires
|
27 |
|
28 | Rectx requires React > 16, but if you are using React < 16, I think it would be ok :)
|
29 |
|
30 | ## Installation
|
31 |
|
32 | ```bash
|
33 | npm install --save rectx babel-core
|
34 | ```
|
35 |
|
36 | ## Simple Usage
|
37 |
|
38 | ```js
|
39 | import React from 'react'
|
40 | import ReactDOM from 'react-dom'
|
41 | import { Provider, Controller, Listen } from 'rectx'
|
42 |
|
43 | /**
|
44 | * we create a state machine `LikeController` inherit from Controller
|
45 | * define a class function `handleClick` for setting state by calling `this.setState`
|
46 | */
|
47 | class LikeController extends Controller {
|
48 | state = {
|
49 | isLike: false,
|
50 | isMount: false
|
51 | }
|
52 |
|
53 | handleClick = () => {
|
54 | this.setState({
|
55 | isLike: !this.state.isLike
|
56 | })
|
57 | }
|
58 | }
|
59 |
|
60 | /**
|
61 | * a simple `<Like/>` react component with property `to` and `didMount`
|
62 | * @to:array, state machine arrays, this property can be set a bunch of `Machine`
|
63 | * @didMount:function, when `<Lisent/>` component mounted, it will be fired,
|
64 | * The arguments of didMount is the instances of `Machine` you just put in `to` property.
|
65 | */
|
66 | const Like = () => (
|
67 | <Listen
|
68 | to={[LikeController]}
|
69 | didMount={like => {
|
70 | like.setState({ isMount: true })
|
71 | }}
|
72 | >
|
73 | {like => (
|
74 | <div>
|
75 | <button onClick={() => like.handleClick()}>Click me</button>
|
76 | <div>{like.state.isMount ? 'component being loaded' : 'component not loaded'}</div>
|
77 | <div>{like.state.isLike ? 'I love you' : 'I hate you'}</div>
|
78 | </div>
|
79 | )}
|
80 | </Listen>
|
81 | )
|
82 |
|
83 | /**
|
84 | * <Provider/> is necessary wrapper for this system.
|
85 | */
|
86 | ReactDOM.render(
|
87 | <Provider>
|
88 | <Like />
|
89 | </Provider>,
|
90 | document.getElementById('root')
|
91 | )
|
92 | ```
|
93 |
|
94 | Now done, simple as that. We have create some awesome code here.
|
95 |
|
96 | ## Middleware free
|
97 |
|
98 | `redux` has a great middleware mechanism to help developer to deal with `side-effects`, such as `http request`. In rectx, you might not need middlewares. Check out the exsample for async class function:
|
99 |
|
100 | [codeSandbox](https://codesandbox.io/s/l970jx93pz)
|
101 |
|
102 |
|
103 | ## Inspiration
|
104 |
|
105 | this library inspirated by [unstated](https://unstated.io)
|
106 |
|
\ | No newline at end of file |