Skip to content

Commit f182f83

Browse files
committed
update readme according to v1 changes
1 parent c2784b4 commit f182f83

File tree

1 file changed

+20
-24
lines changed

1 file changed

+20
-24
lines changed

README.md

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,20 @@ A Monadic Reactive Composable State Wrapper for React Components
1616
```
1717
npm install react-most --save
1818
```
19-
### browser
20-
```html
21-
<script src="https://cdn.rawgit.com/reactive-react/react-most/master/dist/vendor.js"></script>
22-
<!-- vendor.js includes react, most, most-subject -->
23-
<script src="https://cdn.rawgit.com/reactive-react/react-most/master/dist/react-most.js"></script>
24-
```
25-
26-
then you can use `Most.default` and `Most.connect`
27-
2819
## What
29-
`react-most` is a simple, 100 LOC Higher Order Component for React. Its only dependencies are [most](https://github.com/cujojs/most), [most-subject](https://github.com/mostjs-community/subject), [React](https://github.com/facebook/react), and (optionally, if you prefered) [RxJS](https://github.com/Reactive-Extensions/RxJS).
20+
`react-most` is a simple, 100 LOC Higher Order Component for React. Its only dependencies are [most](https://github.com/cujojs/most), [most-subject](https://github.com/mostjs-community/subject).
3021

31-
Data flow in `react-most` is simple and unidirectional.
22+
Data flow in `react-most` is simple and unidirectional, similar to flux.
3223

3324
![](https://github.com/reactive-react/react-most/wiki/images/react-most-flow.png)
3425

3526
## Terminology
36-
- **Action**: an `Action` can create an `Intent` and send it to the `Intent Stream`
27+
- **Machine**: a machine can emit `Update` to a timeline `update$`, and can be operated by calling function in `actions`
28+
- **Plan**: a Plan is a function that describe how to create a `Machine`
29+
- **Update**: a function `currentState -> nextState`
30+
- **Action**: a function that create `Intent`
31+
- **Intent**: describe what you want to do
3732
- **Intent Stream**: a timeline of every `Intent` created by every `Action`
38-
- **Sink**: a timeline of transformations of state, e.g.
39-
40-
--- (currentState => nextState) -- (currentState => nextState) --->
41-
- **State**: a React component's state
4233

4334
## Quick Start
4435
sorry we don't have a **book** to document how to use `react-most`, and I don't really need to, but
@@ -52,7 +43,7 @@ Also, you can refer to:
5243
- [Wiki](https://github.com/reactive-react/react-most/wiki)
5344

5445

55-
### 1. Create a simple stateless component
46+
### 1. Create a simple stateless View component
5647
![](https://github.com/reactive-react/react-most/wiki/images/view.png)
5748
```html
5849
const CounterView = props => (
@@ -63,16 +54,16 @@ const CounterView = props => (
6354
</div>
6455
)
6556
```
66-
### 2. Define Counter's behavior
57+
### 2. Create a Plan
6758
![](https://github.com/reactive-react/react-most/wiki/images/behavior.png)
6859

69-
1. A counter can have actions of `inc` and `dec`, which will send either `{type: 'inc'}` or `{type:'dec'}` to `Intent Stream` upon being called.
70-
2. A counter reactively generates a state transformation function when it receives an `Intent` of either type `inc` or `dec`.
60+
1. A counter can have actions of `inc` and `dec`, which will send `Intent` of `{type: 'inc'}` or `{type:'dec'}` to `Intent Stream` upon being called.
61+
2. A counter reactively generates `Update` when it receives an `Intent` of either type `inc` or `dec`.
7162

7263
```js
7364
const counterable = connect((intent$) => {
7465
return {
75-
sink$: intent$.map(intent => {
66+
update$: intent$.map(intent => {
7667
switch (intent.type) {
7768
case 'inc':
7869
return state => ({ count: state.count + 1 });
@@ -82,13 +73,18 @@ const counterable = connect((intent$) => {
8273
return _ => _;
8374
}
8475
}),
85-
inc: () => ({ type: 'inc' }),
86-
dec: () => ({ type: 'dec' })
76+
actions: {
77+
inc: () => ({ type: 'inc' }),
78+
dec: () => ({ type: 'dec' })
79+
}
8780
}
8881
})
8982
```
83+
you'll see that the function in `connect` parameter is a `Plan`, the object it return is a `Machine`
84+
85+
and `connect` return a HoC that you can wrap it to View Component
9086

91-
### 3. Connect behavior and view
87+
### 3. Connect Plan and View
9288
![](https://github.com/reactive-react/react-most/wiki/images/wrap.png)
9389
```js
9490
const Counter = counterable(CounterView)

0 commit comments

Comments
 (0)