@reactables/core 0.6.0-alpha.0 → 0.7.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -27
- package/dist/Models/Reactable.d.ts +1 -4
- package/dist/index.js +1 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -47,9 +47,9 @@ In this documentation the term *stream* will refer to an RxJS observable stream.
|
|
|
47
47
|
```javascript
|
|
48
48
|
import { RxCounter } from '@reactables/examples';
|
|
49
49
|
|
|
50
|
-
const
|
|
50
|
+
const [state$, actions] = RxCounter();
|
|
51
51
|
|
|
52
|
-
const {
|
|
52
|
+
const { increment, reset } = actions;
|
|
53
53
|
|
|
54
54
|
state$.subscribe(({ count }) => {
|
|
55
55
|
// Update the count when state changes.
|
|
@@ -86,10 +86,6 @@ Scoped Effects are dynamically created streams scoped to a particular action & k
|
|
|
86
86
|
### Flow & Containment <a name="flow-containment"></a>
|
|
87
87
|
Actions and logic flow through the App in one direction and are **contained** in their respective streams. This makes state updates more predictable and traceable during debugging.
|
|
88
88
|
|
|
89
|
-
Avoid [tapping](https://rxjs.dev/api/operators/tap) your streams. This prevents **logic leaking** from the stream(s).
|
|
90
|
-
|
|
91
|
-
- i.e do not [tap](https://rxjs.dev/api/operators/tap) stream A to trigger an action on stream B. Instead consider declaring stream A as a [source](#hub-sources) for stream B so the dependency is explicit.
|
|
92
|
-
|
|
93
89
|
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/SlideSevenEightUnidirectionalFlow.jpg" />
|
|
94
90
|
|
|
95
91
|
## Examples <a name="examples"></a>
|
|
@@ -98,25 +94,25 @@ Avoid [tapping](https://rxjs.dev/api/operators/tap) your streams. This prevents
|
|
|
98
94
|
|
|
99
95
|
Basic counter example. Button clicks dispatch actions to increment or reset the counter.
|
|
100
96
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/
|
|
97
|
+
Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
|
|
98
|
+
:-------------------------:|:-------------------------:|:-------------------------:
|
|
99
|
+
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Slide11BasicCounterExample.jpg" width="400" /> | [See Code for RxCounter](https://github.com/reactables/reactables/tree/main/packages/examples/src/RxCounter/RxCounter.ts) | <a href="https://stackblitz.com/edit/github-qtpo1k?file=src%2Findex.js"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/VanillaJS.jpg" width="50" /></a><br /><a href="https://stackblitz.com/edit/github-hfk1t1?file=src%2FCounter.tsx"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/React.png" width="60" /></a><br /><a href="https://stackblitz.com/edit/github-98unub?file=src%2Fapp%2Fcounter%2Fcounter.component.ts"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Angular.png" width="60" /></a>
|
|
104
100
|
|
|
105
101
|
### Scoped Effects - Updating Todos <a name="scoped-effects-example"></a>
|
|
106
102
|
|
|
107
103
|
Updating statuses of todo items shows scoped effects in action. An 'update todo' stream is created for each todo during update. Pending async calls in their respective stream are cancelled if a new request comes in with RxJS [switchMap](https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap) operator.
|
|
108
104
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/
|
|
105
|
+
Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
|
|
106
|
+
:-------------------------:|:-------------------------:|:-------------------------:
|
|
107
|
+
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Slide12ScopedEffectsExampleTodos.jpg" width="400" /> | [See Code for RxTodoUpdates](https://github.com/reactables/reactables/tree/main/packages/examples/src/RxTodoUpdates/RxTodoUpdates.ts) | <a href="https://stackblitz.com/edit/github-6pgtev?file=src%2Findex.js"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/VanillaJS.jpg" width="50" /></a><br /><a href="https://stackblitz.com/edit/github-1r6pki?file=src%2FTodoUpdates.tsx"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/React.png" width="60" /><br /><a href="https://stackblitz.com/edit/github-zfmupm?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Ftodos%2Ftodos.component.ts"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Angular.png" width="60" /></a>
|
|
112
108
|
|
|
113
|
-
### Connecting Multiple Reactables - Event
|
|
109
|
+
### Connecting Multiple Reactables - Event Tickets <a name="connecting-hub-example"></a>
|
|
114
110
|
|
|
115
111
|
This examples shows two set reactables. The first is responsible for updating state of the user controls. The second fetches prices based on input from the first set.
|
|
116
112
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/
|
|
113
|
+
Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
|
|
114
|
+
:-------------------------:|:-------------------------:|:-------------------------:
|
|
115
|
+
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Slide13ConnectingHubsExampleEventPrices.jpg" width="400" />| [See Code for RxEventTickets](https://github.com/reactables/reactables/tree/main/packages/examples/src/RxEventTickets/RxEventTickets.ts) | <a href="https://stackblitz.com/edit/github-pgpwly?file=src%2findex.js"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/VanillaJS.jpg" width="50" /></a><br /><a href="https://stackblitz.com/edit/github-eypqvc?file=src%2FEventTickets.tsx"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/React.png" width="60" /></a><br /><a href="https://stackblitz.com/edit/github-66mbtu?file=src%2Fapp%2Fevent-tickets%2Fevent-tickets.component.ts"><img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/Angular.png" width="60" /></a>
|
|
120
116
|
|
|
121
117
|
|
|
122
118
|
## API <a name="api"></a>
|
|
@@ -125,20 +121,15 @@ Event Prices | Design Diagram | Reactable | Try it ou
|
|
|
125
121
|
|
|
126
122
|
Reactables provide the API for applications and UI components to receive and trigger state updates.
|
|
127
123
|
|
|
124
|
+
It is a tuple with the first item being an Observable emitting state changes and the second item is a dictionary of action methods for triggering state updates.
|
|
125
|
+
|
|
128
126
|
```typescript
|
|
129
|
-
export
|
|
130
|
-
state$: Observable<T>;
|
|
131
|
-
actions?: S;
|
|
132
|
-
}
|
|
127
|
+
export type Reactable<T, S = ActionMap> = [Observable<T>, S];
|
|
133
128
|
|
|
134
129
|
export interface ActionMap {
|
|
135
130
|
[key: string | number]: (payload?: unknown) => void | ActionMap;
|
|
136
131
|
}
|
|
137
132
|
```
|
|
138
|
-
| Property | Description |
|
|
139
|
-
| -------- | ----------- |
|
|
140
|
-
| state$ | Observable that emit state changes |
|
|
141
|
-
| actions | Dictionary of methods that dispatches actions to update state |
|
|
142
133
|
|
|
143
134
|
### RxBuilder <a name="rx-builder"></a>
|
|
144
135
|
|
|
@@ -262,10 +253,10 @@ describe('RxCounter', () => {
|
|
|
262
253
|
it('should increment and reset', () => {
|
|
263
254
|
testScheduler.run(({ expectObservable, cold }) => {
|
|
264
255
|
// Create Counter Reactable
|
|
265
|
-
const
|
|
256
|
+
const [
|
|
266
257
|
state$,
|
|
267
|
-
|
|
268
|
-
|
|
258
|
+
{ increment, reset },
|
|
259
|
+
] = RxCounter();
|
|
269
260
|
|
|
270
261
|
// Call actions
|
|
271
262
|
subscription = cold('--b-c', {
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { Observable } from 'rxjs';
|
|
2
|
-
export
|
|
3
|
-
state$: Observable<T>;
|
|
4
|
-
actions: S;
|
|
5
|
-
}
|
|
2
|
+
export type Reactable<T, S = ActionMap> = [Observable<T>, S];
|
|
6
3
|
export interface ActionMap {
|
|
7
4
|
[key: string | number]: (payload?: unknown) => void | ActionMap;
|
|
8
5
|
}
|
package/dist/index.js
CHANGED
|
@@ -203,10 +203,7 @@ var RxBuilder = function (_a) {
|
|
|
203
203
|
},
|
|
204
204
|
];
|
|
205
205
|
}));
|
|
206
|
-
return {
|
|
207
|
-
state$: hub.store({ reducer: reducer, debug: debug, storeValue: storeValue }),
|
|
208
|
-
actions: actionsResult
|
|
209
|
-
};
|
|
206
|
+
return [hub.store({ reducer: reducer, debug: debug, storeValue: storeValue }), actionsResult];
|
|
210
207
|
};
|
|
211
208
|
|
|
212
209
|
exports.RxBuilder = RxBuilder;
|
package/package.json
CHANGED