rx-tiny-flux 1.0.6 → 1.0.8
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 -63
- package/dist/rx-tiny-flux.esm.js +541 -5
- package/dist/rx-tiny-flux.esm.min.js +1 -1
- package/package.json +2 -3
- package/dist/zeppos.esm.js +0 -1660
- package/dist/zeppos.esm.min.js +0 -1
package/Readme.md
CHANGED
|
@@ -89,9 +89,7 @@ Use `createEffect` and the `ofType` operator to build effects.
|
|
|
89
89
|
|
|
90
90
|
```javascript
|
|
91
91
|
// Core library imports
|
|
92
|
-
import { createEffect, ofType } from 'rx-tiny-flux';
|
|
93
|
-
// RxJS operators are imported from the secondary entry point
|
|
94
|
-
import { from, map, concatMap } from 'rx-tiny-flux/rxjs';
|
|
92
|
+
import { createEffect, ofType, from, map, concatMap } from 'rx-tiny-flux';
|
|
95
93
|
|
|
96
94
|
// Your application's action imports
|
|
97
95
|
import { incrementAsync, incrementSuccess } from './actions';
|
|
@@ -116,46 +114,6 @@ const incrementAsyncEffect = createEffect((actions$) =>
|
|
|
116
114
|
|
|
117
115
|
---
|
|
118
116
|
|
|
119
|
-
## RxJS Operators for ZeppOS
|
|
120
|
-
|
|
121
|
-
For use in restricted environments like **ZeppOS**, where direct dependencies on `rxjs` are not allowed, `Rx-Tiny-Flux` re-exports a curated set of common RxJS operators and creation functions from its ZeppOS-specific entry point: `rx-tiny-flux/zeppos`. This allows you to build complex effects without needing to manage RxJS imports in your application code.
|
|
122
|
-
|
|
123
|
-
**Available Exports:**
|
|
124
|
-
|
|
125
|
-
* **Creation Functions:** Used to create new Observables.
|
|
126
|
-
* `from`: Converts a Promise, an array, or an iterable into an Observable.
|
|
127
|
-
* `of`: Emits a variable number of arguments as a sequence and then completes.
|
|
128
|
-
* `defer`: Creates an Observable that, on subscription, calls an Observable factory to make a fresh Observable for each new Subscriber.
|
|
129
|
-
|
|
130
|
-
* **Constants:**
|
|
131
|
-
* `EMPTY`: An Observable that emits no items to the Observer and immediately emits a complete notification. It's useful in effects to stop a stream without dispatching a new action.
|
|
132
|
-
|
|
133
|
-
* **Higher-Order Mapping Operators:** Used to manage inner Observables, typically for handling asynchronous operations like API calls.
|
|
134
|
-
* `concatMap`: Maps to an inner Observable and processes them sequentially.
|
|
135
|
-
* `switchMap`: Maps to an inner Observable but cancels the previous inner subscription if a new outer value arrives.
|
|
136
|
-
* `mergeMap`: Maps to an inner Observable and processes them in parallel.
|
|
137
|
-
* `exhaustMap`: Maps to an inner Observable but ignores new outer values while the current inner Observable is still active.
|
|
138
|
-
|
|
139
|
-
* **Utility Operators:** Used for transformation, filtering, and side effects.
|
|
140
|
-
* `map`: Applies a given project function to each value emitted by the source Observable.
|
|
141
|
-
* `filter`: Emits only those values from the source Observable that pass a predicate function.
|
|
142
|
-
* `tap`: Perform a side effect for every emission on the source Observable, but return an Observable that is identical to the source.
|
|
143
|
-
* `delay`: Delays the emission of items from the source Observable by a given timeout.
|
|
144
|
-
* `catchError`: Catches errors on the source Observable and returns a new Observable or throws an error.
|
|
145
|
-
|
|
146
|
-
* **Utilities:**
|
|
147
|
-
* `pipe`: A utility function for composing operators in a readable, left-to-right sequence. While `Observable.pipe()` is the most common usage, having `pipe` available allows for creating reusable operator compositions.
|
|
148
|
-
|
|
149
|
-
```javascript
|
|
150
|
-
// Instead of managing `rxjs` imports, you can get everything from the `zeppos` entry point:
|
|
151
|
-
import { createEffect, ofType } from 'rx-tiny-flux';
|
|
152
|
-
import { map, from, isApp, propagateAction } from 'rx-tiny-flux/zeppos';
|
|
153
|
-
|
|
154
|
-
// ... your effect implementation
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
---
|
|
158
|
-
|
|
159
117
|
## Selectors
|
|
160
118
|
|
|
161
119
|
Selectors are pure functions used for obtaining slices of store state. The library provides two factory functions for this:
|
|
@@ -240,31 +198,29 @@ This plugin injects `dispatch` and `subscribe` methods into your component's ins
|
|
|
240
198
|
|
|
241
199
|
#### How to Use
|
|
242
200
|
|
|
243
|
-
1. **Create
|
|
244
|
-
2. **Import the `storePlugin`** from `rx-tiny-flux
|
|
245
|
-
3. **Register the plugin
|
|
246
|
-
4. **
|
|
201
|
+
1. **Create your store** instance in `app.js`.
|
|
202
|
+
2. **Import the `storePlugin`** from `rx-tiny-flux`.
|
|
203
|
+
3. **Register the plugin on `BaseApp`**, passing the `store` instance: `BaseApp.use(storePlugin, store)`.
|
|
204
|
+
4. **Register the same plugin on `BasePage`**, but without the store: `BasePage.use(storePlugin)`. The plugin will automatically find the store from the App.
|
|
205
|
+
5. **Use `this.dispatch()` and `this.subscribe()`** inside your App and Pages.
|
|
247
206
|
|
|
248
207
|
Here is a complete example:
|
|
249
208
|
|
|
250
209
|
```javascript
|
|
251
210
|
// app.js - Your application's entry point
|
|
252
|
-
import { BaseApp
|
|
211
|
+
import { BaseApp } from '@zeppos/zml';
|
|
253
212
|
import { Store } from 'rx-tiny-flux';
|
|
254
|
-
import { storePlugin } from 'rx-tiny-flux
|
|
213
|
+
import { storePlugin } from 'rx-tiny-flux';
|
|
255
214
|
|
|
256
215
|
// 1. Import your reducers, actions, etc.
|
|
257
216
|
import { counterReducer } from './path/to/reducers';
|
|
258
|
-
import { selectCounterValue } from './path/to/selectors';
|
|
259
|
-
import { increment } from './path/to/actions';
|
|
260
217
|
|
|
261
218
|
// 2. Create your store instance
|
|
262
219
|
const store = new Store({});
|
|
263
220
|
store.registerReducers(counterReducer);
|
|
264
221
|
|
|
265
|
-
// 3. Register the plugin
|
|
222
|
+
// 3. Register the plugin on BaseApp, providing the store.
|
|
266
223
|
BaseApp.use(storePlugin, store);
|
|
267
|
-
BasePage.use(storePlugin, store);
|
|
268
224
|
|
|
269
225
|
App(BaseApp({
|
|
270
226
|
// ... your App config
|
|
@@ -277,11 +233,14 @@ import { BasePage, ui } from '@zeppos/zml';
|
|
|
277
233
|
import { selectCounterValue } from '../path/to/selectors';
|
|
278
234
|
import { increment } from './path/to/actions';
|
|
279
235
|
|
|
236
|
+
// 4. Register the plugin on BasePage, without providing the store. It will be retrieved from the App.
|
|
237
|
+
BasePage.use(storePlugin);
|
|
238
|
+
|
|
280
239
|
Page(BasePage({
|
|
281
240
|
build() {
|
|
282
241
|
const myText = ui.createWidget(ui.widget.TEXT, { /* ... */ });
|
|
283
242
|
|
|
284
|
-
//
|
|
243
|
+
// 5. Use `this.subscribe` to listen to state changes
|
|
285
244
|
this.subscribe(selectCounterValue, (value) => {
|
|
286
245
|
myText.setProperty(ui.prop.TEXT, `Counter: ${value}`);
|
|
287
246
|
});
|
|
@@ -313,8 +272,7 @@ Imagine you have a `toast` plugin registered on your `BasePage`. You can create
|
|
|
313
272
|
|
|
314
273
|
```javascript
|
|
315
274
|
// effects/toast.effect.js
|
|
316
|
-
import { createEffect, ofType } from 'rx-tiny-flux';
|
|
317
|
-
import { tap } from 'rx-tiny-flux/rxjs';
|
|
275
|
+
import { createEffect, ofType, tap } from 'rx-tiny-flux';
|
|
318
276
|
import { operationSuccess } from '../actions';
|
|
319
277
|
|
|
320
278
|
export const showSuccessToastEffect = createEffect(
|
|
@@ -346,9 +304,8 @@ These operators filter the action stream based on the execution environment, mak
|
|
|
346
304
|
**Example: Handling a request between App and Side Service**
|
|
347
305
|
|
|
348
306
|
```javascript
|
|
349
|
-
// Import
|
|
350
|
-
import { createEffect, ofType } from 'rx-tiny-flux';
|
|
351
|
-
import { isApp, isSideService } from 'rx-tiny-flux/zeppos';
|
|
307
|
+
// Import all operators from the main entry point
|
|
308
|
+
import { createEffect, ofType, isApp, isSideService } from 'rx-tiny-flux';
|
|
352
309
|
import { fetchData, fetchDataSuccess, fetchDataError } from './actions';
|
|
353
310
|
|
|
354
311
|
// This effect runs on the App side and requests data from the service
|
|
@@ -375,10 +332,8 @@ It works by safely using the `subscribe` method injected into the action's conte
|
|
|
375
332
|
**Example: Fetching data using a value from the state**
|
|
376
333
|
|
|
377
334
|
```javascript
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
import { withLatestFromStore } from 'rx-tiny-flux/zeppos';
|
|
381
|
-
import { switchMap, map, catchError } from 'rx-tiny-flux/rxjs';
|
|
335
|
+
// Import all operators from the main entry point
|
|
336
|
+
import { createEffect, ofType, withLatestFromStore, switchMap, map, catchError, from, of } from 'rx-tiny-flux';
|
|
382
337
|
import { fetchData, fetchDataSuccess, fetchDataError } from './actions';
|
|
383
338
|
import { selectCurrentUserId } from './selectors';
|
|
384
339
|
|