You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
After we have a pretty view for represention and inteacting interface, we can define how to update the view, or "how to react on actions". In such case:
68
-
69
-
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.
70
-
2. A counter reactively generates `Update` when it receives an `Intent` of either type `inc` or `dec`.
71
-
72
-
```js
73
-
constplan= (intent$) => {
74
-
return {
75
-
update$:intent$.map(intent=> {
76
-
switch (intent.type) {
77
-
case'inc':
78
-
returnstate=> ({ count:state.count+1 });
79
-
case'dec':
80
-
returnstate=> ({ count:state.count-1 });
81
-
default:
82
-
return_=> _;
83
-
}
84
-
}),
85
-
actions: {
86
-
inc: () => ({ type:'inc' }),
87
-
dec: () => ({ type:'dec' })
88
-
}
89
-
}
90
-
}
91
14
```
92
-
a `Plan` will take `intent$`(Intent Stream) and return a `Machine`.
xReact works for both TypeScript and CMD JS, to install xReact simply use you yarn or npm:
109
20
110
-
render(
111
-
<X x={rx}>
112
-
<Counter />
113
-
</X>,
114
-
document.getElementById('app')
115
-
);
116
21
```
117
-
`Counter` is product(x) of `plan` and `CounterView`, which means it can react to `Intent` as it's plan, and update `CounterView`
118
-
119
-
`<X></X>` will provide a `intent$` instance.
120
-
121
-
122
-
## Features
123
-
Inspired by Redux and Functional Reactive Programming, `xreact` allows you to model user events, actions, and data as reactive streams. Now you can map, filter, compose, and subscribe those streams into your application's state.
124
-
125
-
### Purely Functional, Declarative, and Monadic
126
-
In imperatively written code, you describe step-by-step how to process data. With `xreact`, we simply define data transformations, then compose them to form our data flow. There are no variables, no intermediate state, and no side effects in your data flow's data composition!
There's also [Fantasy Land](https://github.com/fantasyland/fantasy-land) implementation in `src/fantasy.ts`, you can see [bmi calculator example](https://github.com/reactive-react/xreact/blob/master/examples/bmi-calc/app.tsx) to get the idea.
133
-
134
-
### Typesafe and scalable
135
-
Rewritten in Typescript, and abstract Stream as Higher Kind type so easier to bring new FRP lib to integrete with xreact.
136
-
137
-
### Composable and Reusable `Plan`
138
-
In Redux, reducers' use of `switch` statements can make them difficult to compose. Unlike reducers, the function `x` return is simply a function which can easily compose.
139
-
140
-
141
-
```js
142
-
constCounter=x(plan1)(x(plan2)(CounterView))
143
-
// is the same as
144
-
constplan1_x_plan2_x=compose(x(plan1), x(plan2))
145
-
constCounter=plan1_x_plan2_x(CounterView)
146
-
```
147
-
148
-
what really happen behind compose is actually ES6 style mixin, so there won't be any extra layer of HoC and no any performance overhead.
149
-
150
-
### Easy to test, no need for mocks
151
-
Because UI and UI behavior are loosely coupled, you can test a React component by just passing it data. Behaviors can be tested by calling actions and then verifying the state.
### Higher level extract and ready for any FRP library
199
-
xreact came with 2 FRP libs of choice, rxjs and mostjs, for any new lib you only need to implement the `StaticStream` with your prefered lib as Higher Kind Type.
200
-
201
-
more details about HKT implementation in TypeScript is [here](https://github.com/gcanti/fp-ts)
202
-
203
-
## FAQ
204
-
205
-
### How it's different from redux?
206
-
207
-
unlike redux, xreact turn FRP to 11 in react, it model problem different
208
-
209
-
- "global" intent stream(using redux's word should be intent store) not global state store
210
-
- there's not such thing as state store, no state will store anywhere, only state transformations
211
-
- FRP lib as your choice, choose any lib your familiar with
212
-
213
-
### How it's different from cycle.js?
214
-
215
-
think xreact as a more specify and optimized cycle just for react.
global is state is not scalable, think it as a database, and every component query data from it,however, database are hard to scale, design and maintain.
30
+
## Documentation
219
31
220
-
instead of making state global, we think a better choice of doing such reversely, just have what you want to do(intent) globally instead. So, every component can just broadcast what it's trying to do, but only focus on how to reduce intent into a state transformation for it self.
32
+
xReact information and documentation is available on [the website](http://xreact.oyanglul.us/).
221
33
222
-
In this case, one component won't need worry about how the global state structure, and just focus on itself. So, components are more modular and decoupled.
34
+
<!-- We also have a Scaladoc index. -->
223
35
224
-
Furher more, it's composable, we can build small x component constructors and compose them at will to create a bigger and powerfult component constructors. It's much easier and flexible by compose small behavior and state into a big component, not destruct a big global state into small components.
36
+
Finally, we have a list of [frequently-asked questions](https://xreact.oyanglul.us/FAQ.html).
225
37
226
-
## Thanks to...
227
-
-[rxjs](https://github.com/ReactiveX/rxjs)
228
-
-[most](https://github.com/cujojs/most)
229
-
-[React](http://facebook.github.io/react/)
230
-
-[redux](https://github.com/rackt/redux)
231
-
-[Om](https://github.com/omcljs/om)
232
-
-[Cycle](http://cycle.js.org/)
233
-
-[transdux](https://github.com/jcouyang/transdux)
38
+
Our goal is to have clear and comprehensive documentation. If you notice problems, omissions, or errors, please [let us know](https://github.com/reactive-react/xreact/issues).
0 commit comments