@reactables/core 1.0.0-beta.3 → 1.0.0-beta.4
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 +6 -13
- package/dist/Models/Reactable.d.ts +2 -1
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,8 +27,6 @@ Reactive state management with RxJS.
|
|
|
27
27
|
1. [Action](#api-action)
|
|
28
28
|
1. [Reducer](#api-reducer)
|
|
29
29
|
1. [Testing Reactables](#testing)
|
|
30
|
-
1. [Flow Testing](#flow-testing)
|
|
31
|
-
1. [Marble Testing](#marble-testing)
|
|
32
30
|
|
|
33
31
|
## Installation <a name="installation"></a>
|
|
34
32
|
|
|
@@ -81,7 +79,7 @@ When initializing a [Reactable](#reactable-concept) we can declare effects. The
|
|
|
81
79
|
|
|
82
80
|
### Scoped Effects <a name="scoped-effects"></a>
|
|
83
81
|
|
|
84
|
-
Scoped Effects are dynamically created streams scoped to a particular action & key combination when an action is
|
|
82
|
+
Scoped Effects are dynamically created streams scoped to a particular action & key combination when an action is dispatched.
|
|
85
83
|
|
|
86
84
|
<img src="https://raw.githubusercontent.com/reactables/reactables/main/documentation/SlideThreeScopedEffects.jpg" width="600" />
|
|
87
85
|
|
|
@@ -94,7 +92,7 @@ Actions and logic flow through the App in one direction and are **contained** in
|
|
|
94
92
|
|
|
95
93
|
### Basic Counter <a name="basic-counter-example"></a>
|
|
96
94
|
|
|
97
|
-
|
|
95
|
+
A basic counter example. Button clicks dispatch actions to increment or reset the counter.
|
|
98
96
|
|
|
99
97
|
Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
|
|
100
98
|
:-------------------------:|:-------------------------:|:-------------------------:
|
|
@@ -102,7 +100,7 @@ Design Diagram | Reactable | Try it out on StackBlitz.<br /
|
|
|
102
100
|
|
|
103
101
|
### Scoped Effects - Updating Todos <a name="scoped-effects-example"></a>
|
|
104
102
|
|
|
105
|
-
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.
|
|
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 a RxJS [switchMap](https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap) operator.
|
|
106
104
|
|
|
107
105
|
Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
|
|
108
106
|
:-------------------------:|:-------------------------:|:-------------------------:
|
|
@@ -110,7 +108,7 @@ Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choo
|
|
|
110
108
|
|
|
111
109
|
### Connecting Multiple Reactables - Event Tickets <a name="connecting-hub-example"></a>
|
|
112
110
|
|
|
113
|
-
This examples shows two
|
|
111
|
+
This examples shows two sets of reactables. The first is responsible for updating the state of user controls, while the second fetches prices based on input from the first.
|
|
114
112
|
|
|
115
113
|
Design Diagram | Reactable | Try it out on StackBlitz.<br /> Choose your framework
|
|
116
114
|
:-------------------------:|:-------------------------:|:-------------------------:
|
|
@@ -135,7 +133,7 @@ export interface ActionMap {
|
|
|
135
133
|
|
|
136
134
|
### RxBuilder <a name="rx-builder"></a>
|
|
137
135
|
|
|
138
|
-
Factory function for building [Reactables](#reactable). Accepts a [RxConfig](#rx-confg) configuration object
|
|
136
|
+
Factory function for building [Reactables](#reactable). Accepts a [RxConfig](#rx-confg) configuration object.
|
|
139
137
|
|
|
140
138
|
```typescript
|
|
141
139
|
type RxBuilder = <T, S extends Cases<T>>(config: RxConfig<T, S>) => Reactable<T, unknown>
|
|
@@ -221,7 +219,7 @@ interface Action<T = undefined> {
|
|
|
221
219
|
|
|
222
220
|
#### Reducer <a name="api-reducer"></a>
|
|
223
221
|
|
|
224
|
-
From [Redux Docs](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers)
|
|
222
|
+
From the [Redux Docs](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers):
|
|
225
223
|
> Reducers are functions that take the current state and an action as arguments, and return a new state result
|
|
226
224
|
|
|
227
225
|
```typescript
|
|
@@ -229,11 +227,6 @@ type Reducer<T> = (state?: T, action?: Action<unknown>) => T;
|
|
|
229
227
|
```
|
|
230
228
|
|
|
231
229
|
## Testing Reactables<a name="testing"></a>
|
|
232
|
-
### Flow Testing<a name="flow-testing"></a>
|
|
233
|
-
|
|
234
|
-
You can test a series of actions to simulate a defined user flow with the `testFlow` method from [`@reactables/testing`](https://github.com/reactables/reactables/blob/main/packages/testing/README.md) package. See [`@reactables/testing`](https://github.com/reactables/reactables/blob/main/packages/testing/README.md) for details.
|
|
235
|
-
|
|
236
|
-
### Marble Testing<a name="marble-testing"></a>
|
|
237
230
|
|
|
238
231
|
We can use RxJS's built in [Marble Testing](https://rxjs.dev/guide/testing/marble-testing) for testing [Reactables](#reactable).
|
|
239
232
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Observable } from 'rxjs';
|
|
2
|
-
|
|
2
|
+
import { Action } from './Action';
|
|
3
|
+
export type Reactable<T, S = ActionMap> = [Observable<T>, S, Observable<Action<unknown>>?];
|
|
3
4
|
export interface ActionMap {
|
|
4
5
|
[key: string | number]: (payload?: unknown) => void | ActionMap;
|
|
5
6
|
}
|
package/dist/index.js
CHANGED
package/package.json
CHANGED