3
3
# React Native Queue
4
4
#### Simple. Powerful. Persistent.
5
5
6
- [ ![ Build Status] ( https://travis-ci.org/billmalarky/react-native-queue.svg?branch=master )] ( https://travis-ci.org/billmalarky/react-native-queue )
7
- [ ![ License] ( https://img.shields.io/badge/license-MIT-blue.svg )] ( https://github.com/billmalarky/react-native-queue/blob/master/LICENSE )
8
- [ ![ ESLint] ( https://img.shields.io/badge/eslint-ok-green.svg )] ( https://github.com/billmalarky/react-native-queue/blob/master/.eslintrc.js )
9
- [ ![ JSDoc] ( https://img.shields.io/badge/jsdoc-100%25%20code%20documentation-green.svg )] ( http://usejsdoc.org/ )
10
- [ ![ Coverage Status] ( https://coveralls.io/repos/github/billmalarky/react-native-queue/badge.svg?branch=master )] ( https://coveralls.io/github/billmalarky/react-native-queue?branch=master )
6
+ [ ![ Node.js CI] ( https://github.com/sourcetoad/react-native-queue/master/workflows/build.yml/badge.svg )] ( https://github.com/sourcetoad/react-native-queue/master/workflows/build.yml )
7
+ [ ![ License] ( https://img.shields.io/badge/license-MIT-blue.svg )] ( https://github.com/sourcetoad/react-native-queue/blob/master/LICENSE )
11
8
12
9
A React Native at-least-once priority job queue / task queue backed by persistent Realm storage. Jobs will persist until completed, even if user closes and re-opens app. React Native Queue is easily integrated into OS background processes (services) so you can ensure the queue will continue to process until all jobs are completed even if app isn't in focus. It also plays well with Workers so your jobs can be thrown on the queue, then processed in dedicated worker threads for greatly improved processing performance.
13
10
@@ -23,7 +20,6 @@ A React Native at-least-once priority job queue / task queue backed by persisten
23
20
* [ Advanced Usage Examples] ( #advanced-usage-examples )
24
21
* [ Advanced Job Full Example] ( #advanced-job-full-example )
25
22
* [ OS Background Task Full Example] ( #os-background-task-full-example )
26
- * [ Tutorials] ( #tutorials )
27
23
28
24
## Features
29
25
@@ -86,7 +82,6 @@ Creating and processing jobs consists of:
86
82
4 . Starting the queue (note this happens automatically on job creation, but sometimes the queue must be explicitly started such as in a OS background task or on app restart). Queue can be started with a lifespan in order to limit queue processing time.
87
83
88
84
``` js
89
-
90
85
import queueFactory from ' react-native-queue' ;
91
86
92
87
// Of course this line needs to be in the context of an async function,
@@ -104,7 +99,6 @@ queue.addWorker('example-job', async (id, payload) => {
104
99
resolve ();
105
100
}, 5000 );
106
101
});
107
-
108
102
});
109
103
110
104
// Create a couple "example-job" jobs.
@@ -144,7 +138,6 @@ queue.createJob('example-job', {
144
138
});
145
139
146
140
console .log (' The above jobs are processing in the background of app now.' );
147
-
148
141
```
149
142
150
143
## Options and Job Lifecycle Callbacks
@@ -156,7 +149,6 @@ queue.addWorker() accepts an options object in order to tweak standard functiona
156
149
** IMPORTANT: Job Lifecycle callbacks are called asynchronously.** They do not block job processing or each other. Don't put logic in onStart that you expect to be completed before the actual job process begins executing. Don't put logic in onFailure you expect to be completed before onFailed is called. You can, of course, assume that the job process has completed (or failed) before onSuccess, onFailure, onFailed, or onComplete are asynchonrously called.
157
150
158
151
``` js
159
-
160
152
queue .addWorker (' job-name-here' , async (id , payload ) => { console .log (id); }, {
161
153
162
154
// Set max number of jobs for this worker to process concurrently.
@@ -172,39 +164,28 @@ queue.addWorker('job-name-here', async (id, payload) => { console.log(id); }, {
172
164
// As such, do not place any logic in onStart that your actual job worker function will depend on,
173
165
// this type of logic should of course go inside the job worker function itself.
174
166
onStart: async (id , payload ) => {
175
-
176
- console .log (' Job "job-name-here" with id ' + id + ' has started processing.' );
177
-
167
+ console .log (' Job "job-name-here" with id ' + id + ' has started processing.' );
178
168
},
179
169
180
170
// onSuccess job callback handler is fired after a job successfully completes processing.
181
171
onSuccess: async (id , payload ) => {
182
-
183
172
console .log (' Job "job-name-here" with id ' + id + ' was successful.' );
184
-
185
173
},
186
174
187
175
// onFailure job callback handler is fired after each time a job fails (onFailed also fires if job has reached max number of attempts).
188
176
onFailure: async (id , payload ) => {
189
-
190
177
console .log (' Job "job-name-here" with id ' + id + ' had an attempt end in failure.' );
191
-
192
178
},
193
179
194
180
// onFailed job callback handler is fired if job fails enough times to reach max number of attempts.
195
181
onFailed: async (id , payload ) => {
196
-
197
182
console .log (' Job "job-name-here" with id ' + id + ' has failed.' );
198
-
199
183
},
200
184
201
185
// onComplete job callback handler fires after job has completed processing successfully or failed entirely.
202
186
onComplete: async (id , payload ) => {
203
-
204
187
console .log (' Job "job-name-here" with id ' + id + ' has completed processing.' );
205
-
206
188
}
207
-
208
189
});
209
190
210
191
```
@@ -214,9 +195,7 @@ queue.addWorker('job-name-here', async (id, payload) => { console.log(id); }, {
214
195
queue.createJob() accepts an options object in order to tweak standard functionality.
215
196
216
197
``` js
217
-
218
198
queue .createJob (' job-name-here' , {foo: ' bar' }, {
219
-
220
199
// Higher priority jobs (10) get processed before lower priority jobs (-10).
221
200
// Any int will work, priority 1000 will be processed before priority 10, though this is probably overkill.
222
201
// Defaults to 0.
@@ -239,10 +218,7 @@ queue.createJob('job-name-here', {foo: 'bar'}, {
239
218
// Number of times to attempt a failing job before marking job as failed and moving on.
240
219
// Defaults to 1.
241
220
attempts: 4 , // If this job fails to process 4 times in a row, it will be marked as failed.
242
-
243
- });
244
-
245
-
221
+ });
246
222
```
247
223
248
224
## Testing with Jest
@@ -262,7 +238,6 @@ Because realm will write database files to the root test directory when running
262
238
#### Advanced Job Full Example
263
239
264
240
``` js
265
-
266
241
import React , { Component } from ' react' ;
267
242
import {
268
243
Platform ,
@@ -284,11 +259,9 @@ export default class App extends Component<{}> {
284
259
};
285
260
286
261
this .init ();
287
-
288
262
}
289
263
290
264
async init () {
291
-
292
265
const queue = await queueFactory ();
293
266
294
267
//
@@ -322,7 +295,6 @@ export default class App extends Component<{}> {
322
295
resolve ();
323
296
}, 1000 );
324
297
});
325
-
326
298
});
327
299
328
300
//
@@ -350,7 +322,6 @@ export default class App extends Component<{}> {
350
322
resolve ();
351
323
}, 1000 );
352
324
});
353
-
354
325
});
355
326
356
327
queue .addWorker (' job-chain-2nd-step' , async (id , payload ) => {
@@ -370,7 +341,6 @@ export default class App extends Component<{}> {
370
341
resolve ();
371
342
}, 1000 );
372
343
});
373
-
374
344
});
375
345
376
346
queue .addWorker (' job-chain-final-step' , async (id , payload ) => {
@@ -385,7 +355,6 @@ export default class App extends Component<{}> {
385
355
resolve ();
386
356
}, 1000 );
387
357
});
388
-
389
358
});
390
359
391
360
// Start queue to process any jobs that hadn't finished when app was last closed.
@@ -395,15 +364,13 @@ export default class App extends Component<{}> {
395
364
this .setState ({
396
365
queue
397
366
});
398
-
399
367
}
400
368
401
369
makeJob (jobName , payload = {}) {
402
370
this .state .queue .createJob (jobName, payload);
403
371
}
404
372
405
373
render () {
406
-
407
374
return (
408
375
< View style= {styles .container }>
409
376
< Text style= {styles .welcome }>
@@ -431,8 +398,6 @@ const styles = StyleSheet.create({
431
398
margin: 10 ,
432
399
},
433
400
});
434
-
435
-
436
401
```
437
402
438
403
#### OS Background Task Full Example
@@ -442,7 +407,6 @@ For the purpose of this example we will use the [React Native Background Task](h
442
407
Follow the [ installation steps] ( https://github.com/jamesisaac/react-native-background-task#installation ) for React Native Background Task.
443
408
444
409
``` js
445
-
446
410
import React , { Component } from ' react' ;
447
411
import {
448
412
Platform ,
@@ -470,7 +434,6 @@ BackgroundTask.define(async () => {
470
434
} else {
471
435
await AsyncStorage .setItem (' c3poData' , ' C-3PO arbitrary data loaded!' );
472
436
}
473
-
474
437
});
475
438
476
439
// Start the queue with a lifespan
@@ -482,11 +445,9 @@ BackgroundTask.define(async () => {
482
445
483
446
// finish() must be called before OS hits timeout.
484
447
BackgroundTask .finish ();
485
-
486
448
});
487
449
488
450
export default class App extends Component < {}> {
489
-
490
451
constructor (props ) {
491
452
super (props);
492
453
@@ -496,11 +457,9 @@ export default class App extends Component<{}> {
496
457
};
497
458
498
459
this .init ();
499
-
500
460
}
501
461
502
462
async init () {
503
-
504
463
const queue = await queueFactory ();
505
464
506
465
// Add the worker.
@@ -515,7 +474,6 @@ export default class App extends Component<{}> {
515
474
this .setState ({
516
475
queue
517
476
});
518
-
519
477
}
520
478
521
479
componentDidMount () {
@@ -532,7 +490,6 @@ export default class App extends Component<{}> {
532
490
}
533
491
534
492
async checkData () {
535
-
536
493
const lukeData = await AsyncStorage .getItem (' lukeData' );
537
494
const c3poData = await AsyncStorage .getItem (' c3poData' );
538
495
@@ -542,11 +499,9 @@ export default class App extends Component<{}> {
542
499
c3poData: (c3poData) ? c3poData : ' No data loaded from OS background task yet for C-3PO.'
543
500
}
544
501
});
545
-
546
502
}
547
503
548
504
render () {
549
-
550
505
let output = ' No data loaded from OS background task yet.' ;
551
506
if (this .state .data ) {
552
507
output = JSON .stringify (this .state .data );
@@ -566,7 +521,6 @@ export default class App extends Component<{}> {
566
521
< Text > {output}< / Text >
567
522
< / View>
568
523
);
569
-
570
524
}
571
525
}
572
526
@@ -583,15 +537,4 @@ const styles = StyleSheet.create({
583
537
margin: 10 ,
584
538
},
585
539
});
586
-
587
540
```
588
-
589
- ## Tutorials
590
-
591
- #### Easy OS Background Tasks in React Native
592
-
593
- An in-depth guide to setting up background tasks / services that run periodically when the app is closed.
594
-
595
- * [ Hosted on Medium] ( https://hackernoon.com/easy-os-background-tasks-in-react-native-bc4476c48b8a )
596
- * [ Raw Markdown] ( /docs/easy-os-background-tasks-in-react-native.md )
597
-
0 commit comments