@reactables/core 0.5.2-alpha.0 → 0.5.4-alpha.0
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 +13 -38
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,12 +26,13 @@ Reactive state management with RxJS.
|
|
|
26
26
|
1. [ScopedEffects](#api-scoped-effects)
|
|
27
27
|
1. [Action](#api-action)
|
|
28
28
|
1. [Reducer](#api-reducer)
|
|
29
|
-
1. [Testing](#testing)
|
|
30
|
-
1. [Reactables](#testing-reactables)
|
|
29
|
+
1. [Testing Reactables](#testing)
|
|
31
30
|
|
|
32
31
|
## Installation <a name="installation"></a>
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
Installation will require [RxJS](https://rxjs.dev/) if not already installed.
|
|
34
|
+
|
|
35
|
+
`npm i rxjs @reactables/core`
|
|
35
36
|
|
|
36
37
|
## Core concepts <a name="core-concepts"></a>
|
|
37
38
|
|
|
@@ -131,17 +132,17 @@ export interface Reactable<T, S = ActionMap> {
|
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
export interface ActionMap {
|
|
134
|
-
[key: string | number]: (payload?: unknown) => void;
|
|
135
|
+
[key: string | number]: (payload?: unknown) => void | ActionMap;
|
|
135
136
|
}
|
|
136
137
|
```
|
|
137
138
|
| Property | Description |
|
|
138
139
|
| -------- | ----------- |
|
|
139
140
|
| state$ | Observable that emit state changes |
|
|
140
|
-
| actions
|
|
141
|
+
| actions | Dictionary of methods that dispatches actions to update state |
|
|
141
142
|
|
|
142
143
|
### RxBuilder <a name="rx-builder"></a>
|
|
143
144
|
|
|
144
|
-
|
|
145
|
+
Factory function for building [Reactables](#reactable). Accepts a [RxConfig](#rx-confg) configuration object
|
|
145
146
|
|
|
146
147
|
```typescript
|
|
147
148
|
type RxBuilder = <T, S extends Cases<T>>(config: RxConfig<T, S>) => Reactable<T, unknown>
|
|
@@ -197,7 +198,7 @@ type Effect<T, S> = OperatorFunction<Action<T>, Action<S>>;
|
|
|
197
198
|
|
|
198
199
|
#### ScopedEffects <a name="api-scoped-effects"></a>
|
|
199
200
|
|
|
200
|
-
Scoped Effects are declared in [
|
|
201
|
+
Scoped Effects are declared when defining reducers in [RxConfig](#rx-config). They are dynamically created stream(s) scoped to an Action `type` & `key` combination.
|
|
201
202
|
|
|
202
203
|
```typescript
|
|
203
204
|
interface ScopedEffects<T> {
|
|
@@ -210,30 +211,6 @@ interface ScopedEffects<T> {
|
|
|
210
211
|
| key (optional) | key to be combined with the Action `type` to generate a unique signature for the effect stream(s). Example: An id for the entity the action is being performed on. |
|
|
211
212
|
| effects | Array of [Effects](#api-effects) scoped to the Action `type` & `key` |
|
|
212
213
|
|
|
213
|
-
Example:
|
|
214
|
-
|
|
215
|
-
```typescript
|
|
216
|
-
|
|
217
|
-
const UPDATE_TODO = 'UPDATE_TODO';
|
|
218
|
-
const UPDATE_TODO_SUCCESS = 'UPDATE_TODO_SUCCESS';
|
|
219
|
-
const updateTodo = ({ id, message }, todoService: TodoService) => ({
|
|
220
|
-
type: UPDATE_TODO,
|
|
221
|
-
payload: { id, message },
|
|
222
|
-
scopedEffects: {
|
|
223
|
-
key: id,
|
|
224
|
-
effects: [
|
|
225
|
-
(updateTodoActions$: Observable<Action<string>>) =>
|
|
226
|
-
updateTodoActions$.pipe(
|
|
227
|
-
mergeMap(({ payload: { id, message } }) => todoService.updateTodo(id, message))
|
|
228
|
-
map(({ data }) => ({
|
|
229
|
-
type: UPDATE_TODO_SUCCESS,
|
|
230
|
-
payload: data
|
|
231
|
-
}))
|
|
232
|
-
)
|
|
233
|
-
]
|
|
234
|
-
}
|
|
235
|
-
})
|
|
236
|
-
```
|
|
237
214
|
|
|
238
215
|
#### Action <a name="api-action"></a>
|
|
239
216
|
```typescript
|
|
@@ -258,19 +235,18 @@ From [Redux Docs](https://redux.js.org/tutorials/fundamentals/part-3-state-actio
|
|
|
258
235
|
type Reducer<T> = (state?: T, action?: Action<unknown>) => T;
|
|
259
236
|
```
|
|
260
237
|
|
|
261
|
-
## Testing <a name="testing"></a>
|
|
238
|
+
## Testing Reactables<a name="testing"></a>
|
|
262
239
|
|
|
263
240
|
We can use RxJS's built in [Marble Testing](https://rxjs.dev/guide/testing/marble-testing) for testing [Reactables](#reactable).
|
|
264
241
|
|
|
265
|
-
|
|
242
|
+
[Test for RxCounter](https://github.com/reactables/reactables/blob/main/packages/examples/src/RxCounter/RxCounter.test.ts)
|
|
266
243
|
|
|
267
244
|
```typescript
|
|
268
|
-
|
|
269
|
-
import { Counter } from './Counter';
|
|
245
|
+
import { RxCounter } from './RxCounter';
|
|
270
246
|
import { Subscription } from 'rxjs';
|
|
271
247
|
import { TestScheduler } from 'rxjs/testing';
|
|
272
248
|
|
|
273
|
-
describe('
|
|
249
|
+
describe('RxCounter', () => {
|
|
274
250
|
let testScheduler: TestScheduler;
|
|
275
251
|
let subscription: Subscription;
|
|
276
252
|
|
|
@@ -289,7 +265,7 @@ describe('Counter', () => {
|
|
|
289
265
|
const {
|
|
290
266
|
state$,
|
|
291
267
|
actions: { increment, reset },
|
|
292
|
-
} =
|
|
268
|
+
} = RxCounter();
|
|
293
269
|
|
|
294
270
|
// Call actions
|
|
295
271
|
subscription = cold('--b-c', {
|
|
@@ -306,5 +282,4 @@ describe('Counter', () => {
|
|
|
306
282
|
});
|
|
307
283
|
});
|
|
308
284
|
});
|
|
309
|
-
|
|
310
285
|
```
|
package/package.json
CHANGED