├── .babelrc ├── .gitignore ├── .idea ├── inspectionProfiles │ └── Project_Default.xml ├── jsLibraryMappings.xml ├── misc.xml ├── modules.xml ├── rxjs-operators-demo.iml ├── vcs.xml ├── watcherTasks.xml └── workspace.xml ├── README.md ├── buffer └── index.js ├── combineLatest ├── index.html └── index.js ├── concat └── index.js ├── concatAll └── index.js ├── concatMap └── index.js ├── create └── index.js ├── debounce └── index.js ├── defaultIfEmpty └── index.js ├── delay-delayWhen └── index.js ├── distinctUntilChange └── index.js ├── do └── index.js ├── empty └── index.js ├── every └── index.js ├── exhaustMap └── index.js ├── filter └── index.js ├── first └── index.js ├── forkJoin └── index.js ├── from └── index.js ├── fromEvent ├── index.html └── index.js ├── groupBy └── index.js ├── ignoreElements └── index.js ├── index.js ├── interval-timer └── index.js ├── last └── index.js ├── let └── index.js ├── map-mapTo └── index.js ├── merge └── index.js ├── multicast └── index.js ├── of └── index.js ├── package.json ├── partition └── index.js ├── pluck └── index.js ├── race └── index.js ├── range └── index.js ├── reduce-scan └── index.js ├── redux └── index.js ├── retry └── index.js ├── sample └── index.js ├── single └── index.js ├── skip └── index.js ├── startWith └── index.js ├── take └── index.js ├── throttle └── index.js ├── throw └── index.js ├── timeout └── index.js ├── utility.js ├── webpack.config.babel.js ├── window └── index.js ├── withLatestFrom └── index.js └── zip └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | # Logs 63 | logs 64 | *.log 65 | npm-debug.log* 66 | yarn-debug.log* 67 | yarn-error.log* 68 | 69 | # Runtime data 70 | pids 71 | *.pid 72 | *.seed 73 | *.pid.lock 74 | 75 | # Directory for instrumented libs generated by jscoverage/JSCover 76 | lib-cov 77 | 78 | # Coverage directory used by tools like istanbul 79 | coverage 80 | 81 | # nyc test coverage 82 | .nyc_output 83 | 84 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 85 | .grunt 86 | 87 | # Bower dependency directory (https://bower.io/) 88 | bower_components 89 | 90 | # node-waf configuration 91 | .lock-wscript 92 | 93 | # Compiled binary addons (https://nodejs.org/api/addons.html) 94 | build/Release 95 | 96 | # Dependency directories 97 | node_modules/ 98 | jspm_packages/ 99 | 100 | # Typescript v1 declaration files 101 | typings/ 102 | 103 | # Optional npm cache directory 104 | .npm 105 | 106 | # Optional eslint cache 107 | .eslintcache 108 | 109 | # Optional REPL history 110 | .node_repl_history 111 | 112 | # Output of 'npm pack' 113 | *.tgz 114 | 115 | # Yarn Integrity file 116 | .yarn-integrity 117 | 118 | # dotenv environment variables file 119 | .env 120 | 121 | # next.js build output 122 | .next 123 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | false 8 | 9 | false 10 | false 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | CSS 24 | 25 | 26 | Code quality toolsCSS 27 | 28 | 29 | CoffeeScript 30 | 31 | 32 | Cucumber 33 | 34 | 35 | General 36 | 37 | 38 | GeneralJavaScript 39 | 40 | 41 | Handlebars/Mustache 42 | 43 | 44 | JavaScript 45 | 46 | 47 | JavaScript function metricsJavaScript 48 | 49 | 50 | JavaScript validity issuesJavaScript 51 | 52 | 53 | Node.jsJavaScript 54 | 55 | 56 | Probable bugsCSS 57 | 58 | 59 | Probable bugsCoffeeScript 60 | 61 | 62 | Probable bugsJavaScript 63 | 64 | 65 | Unit testingJavaScript 66 | 67 | 68 | XML 69 | 70 | 71 | 72 | 73 | AngularJS 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/rxjs-operators-demo.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 42 | 97 | 98 | 99 | 100 | 101 | true 102 | DEFINITION_ORDER 103 | 104 | 105 | 106 | 107 | 108 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 136 | 137 | 140 | 141 | 142 | 143 | 146 | 147 | 150 | 151 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 202 | 203 | project 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | project 220 | 221 | 222 | true 223 | 224 | 225 | 226 | DIRECTORY 227 | 228 | false 229 | 230 | 231 | 232 | 233 | 235 | 236 | 237 | 238 | 1517412497331 239 | 246 | 247 | 248 | 249 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 285 | 286 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rxjs-operators 2 | A collection of simple examples for RxJS operators 3 | 4 | ## About 5 | This is intended to accompony the Udemy Course RxJS Operators (2018, Code Whisperer Enterprises), found here [https://www.udemy.com/rxjs-operators](https://www.udemy.com/rxjs-operators/?couponCode=OPERATORS-100), however it can be useful for all learners. 6 | 7 | ## Getting Started 8 | After cloning the repository, install dependencies with `npm install.` Install babel-cli globablly with `npm install -g babel-cli` 9 | 10 | ## Structure 11 | This project contains one directory for each RxJS operator that this course covers. 12 | Each directory usually contains just a single file, `index.js`. 13 | To run this file, and test the demo implementation of the operator, just type `babel-node [operatorName]` 14 | 15 | ## How To Use 16 | Ideally, you are watching the related Udemy course and writing each of these files along with me as I explain them. In that case, this is just a backup in case you get stuck. 17 | Otherwise, you can review the various files in any way you like, and run any of them to get a better idea of how operators work in action. 18 | -------------------------------------------------------------------------------- /buffer/index.js: -------------------------------------------------------------------------------- 1 | import { fromStdIn } from '../utility' 2 | import Rx from 'rxjs'; 3 | 4 | fromStdIn() 5 | // .buffer( 6 | // fromStdIn().filter(key=>key==='p') 7 | // ) 8 | // .bufferCount(10) 9 | // .bufferTime(1000) 10 | // .bufferToggle( 11 | // fromStdIn().filter(key=>key==='p'), 12 | // ()=>fromStdIn().filter(key=>key==='o') 13 | // ) 14 | .bufferWhen( 15 | ()=>Rx.Observable.timer(1000) 16 | ) 17 | .subscribe(e=>console.log(e)); -------------------------------------------------------------------------------- /combineLatest/index.html: -------------------------------------------------------------------------------- 1 | 2 |

What Country do you Live In?

3 | 9 | 10 |

11 | What city do you live in? 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /combineLatest/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const countryObservable = Rx.Observable.fromEvent( 4 | document.getElementById('country'), 5 | "change", 6 | e=>e.target.value 7 | ); 8 | 9 | const cityObservable = Rx.Observable.fromEvent( 10 | document.getElementById("city"), 11 | "change", 12 | e=>e.target.value 13 | ); 14 | 15 | Rx.Observable.combineLatest( 16 | countryObservable, 17 | cityObservable 18 | ) 19 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /concat/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | // .range(1,10) 5 | .interval(100) 6 | .take(20) 7 | .concat( 8 | Rx.Observable 9 | // .range(1,20) 10 | .interval(100) 11 | .map(n=>"#2"+n) 12 | .skip(10) 13 | ) 14 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /concatAll/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | import { fromStdIn } from '../utility'; 3 | 4 | Rx.Observable.of( 5 | Rx.Observable.range(1,3), 6 | Rx.Observable.interval(100).take(10), 7 | fromStdIn() 8 | ) 9 | .concatAll() 10 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /concatMap/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .interval(100) 5 | .concatMapTo(Rx.Observable.range(0,10)) 6 | // .concatMap(n=>Rx.Observable.range(0,n+1)) 7 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /create/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs' 2 | 3 | const customObservable = Rx.Observable.create(observer=>{ 4 | observer.next(42); 5 | //observer.complete(108); 6 | setInterval(()=>{ 7 | observer.next("FLOON!!"); 8 | },500); 9 | 10 | setTimeout(()=>{ 11 | observer.complete(); 12 | },2500) 13 | }); 14 | 15 | customObservable 16 | .subscribe({ 17 | next:a=>console.log("NEXT!",a), 18 | complete:b=>console.log("COMPLETE",b) 19 | }); -------------------------------------------------------------------------------- /debounce/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | import { fromStdIn } from '../utility' 3 | 4 | fromStdIn() 5 | // .debounce( 6 | // ()=>Rx.Observable.timer(1000) 7 | // ) 8 | .debounceTime(1000) 9 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /defaultIfEmpty/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .empty() 5 | .defaultIfEmpty(42) 6 | .subscribe(a=>console.log("Where's the value???",a)); -------------------------------------------------------------------------------- /delay-delayWhen/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | /* 3 | Rx.Observable.of( 4 | 42 5 | ) 6 | .do(()=>console.log("What is the meaning of life, the universe, and everything?")) 7 | .delay(1200) 8 | .do(()=>console.log("Come on! You know this one!!")) 9 | .delay(2000) 10 | .subscribe(v=>console.log(v)); 11 | */ 12 | 13 | console.log("STARTING!"); 14 | Rx.Observable.range( 15 | 1, 9 16 | ) 17 | .delayWhen(n=>Rx.Observable.timer(n * 1000)) 18 | .subscribe(n=>console.log(n)); -------------------------------------------------------------------------------- /distinctUntilChange/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs' 2 | 3 | Rx.Observable 4 | .interval(100) 5 | .map(n=>~~(n/10)) 6 | .distinctUntilChanged() 7 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /do/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const interval = Rx.Observable.interval(1000); 4 | 5 | interval 6 | .map(n=>n*n) 7 | .do(n=>console.log("N after Map#1::",n)) 8 | .map(n=>n / 3) 9 | .do(n=>console.log("N after Map#2::",n)) 10 | .map(n=>n * n * n) 11 | .do(n=>console.log("N after Map#3::",n)) 12 | .map(n=>n % 42) 13 | .do(n=>console.log("N after Map#4::",n)) 14 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /empty/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .empty() 5 | .subscribe({ 6 | complete:a=>console.log("COMPLEEEEEAAAT",a), 7 | next:a=>console.log("EMITTT",a) 8 | }); -------------------------------------------------------------------------------- /every/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const range = Rx 4 | .Observable 5 | .interval(100) 6 | .take(100) 7 | 8 | range 9 | .map(n=>n*2) 10 | .do(v=>console.log("Value::",v)) 11 | .every(n=>n % 2 == 0) 12 | .subscribe(b=>console.log(b)); -------------------------------------------------------------------------------- /exhaustMap/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const slowDataProcess = (n)=>Rx.Observable.timer(5000).mapTo(n); 4 | 5 | const fasterInterval = Rx.Observable 6 | .interval(700) 7 | .exhaustMap(n=>slowDataProcess(n)) 8 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /filter/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const range = Rx.Observable 4 | .interval(400) 5 | .filter(n=>n % 2 != 0) 6 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /first/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable.interval(100) 4 | .first() 5 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /forkJoin/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const friendAPI = Rx.Observable 4 | .timer(1000) 5 | .mapTo({name:"Hank"}); 6 | 7 | const preferencesAPI = Rx.Observable 8 | .timer(1700) 9 | .mapTo(Rx.Observable.throw()) 10 | .concatAll() 11 | // .mapTo({theme:"dark"}); 12 | 13 | Rx.Observable.forkJoin( 14 | friendAPI, 15 | preferencesAPI 16 | ) 17 | .subscribe(r=>console.log(r)); -------------------------------------------------------------------------------- /from/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const fibonacciArray = [1,1,2,3,5,8,13,21]; 4 | const fibonacciPromise = new Promise(r=>r(fibonacciArray)); 5 | function * fibonacciGenerator () { 6 | let a = 1, b = 1; 7 | while (true) { 8 | let c = a+b; 9 | yield c; 10 | a = b; 11 | b = c; 12 | } 13 | }; 14 | 15 | Rx.Observable.from( 16 | //fibonacciArray 17 | // fibonacciPromise 18 | fibonacciGenerator() 19 | ) 20 | .take(20) 21 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /fromEvent/index.html: -------------------------------------------------------------------------------- 1 | 2 |

What Kind of Knight Are You?

3 |
4 |

5 | Your House Animal 6 |

7 | 12 |

13 | Your House Motto 14 |

15 | 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /fromEvent/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable.fromEvent(document.forms[0],'submit') 4 | .do(()=>console.log("Prevent refresh")) 5 | .subscribe(e=>e.preventDefault()); 6 | 7 | Rx.Observable.fromEvent(document.getElementById('animal'),'change') 8 | .map(event=>event.target.value) 9 | .subscribe(e=>console.log(e)); 10 | 11 | Rx.Observable.fromEvent(document.getElementById('motto'), 'change') 12 | .map(e=>e.target.value) 13 | .subscribe(e=>console.log(e)); -------------------------------------------------------------------------------- /groupBy/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .range(1,20) 5 | .groupBy(n=>n % 3) 6 | .mergeMap(nGroup=>nGroup.toArray()) 7 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /ignoreElements/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | console.log("interval's started!"); 4 | Rx.Observable 5 | .interval(100) 6 | .take(20) 7 | .ignoreElements() 8 | .subscribe({ 9 | next:a=>console.log(a), 10 | complete:a=>console.log("COMPLEEEETE!", a), 11 | }); -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | console.log("OPERATORS WORLD!!"); -------------------------------------------------------------------------------- /interval-timer/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const stopWatch = Rx.Observable.timer(2000,1000); 4 | 5 | stopWatch.subscribe(a=>console.log("A", a)); -------------------------------------------------------------------------------- /last/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | // .range(1,9) 5 | .interval(100) 6 | .take(10) 7 | .last(n=> n % 2 == 0) 8 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /let/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .interval(1000) 5 | .let(source=>Rx.Observable.interval(100)) 6 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /map-mapTo/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const range = Rx.Observable.range(1,9); 4 | 5 | range 6 | .map(n=>n * n) 7 | .subscribe(a=>console.log(a)); 8 | 9 | const notificationAPI = Rx.Observable.interval(1000); 10 | notificationAPI 11 | .mapTo({type:"NOTIFICATION_ARRIVED"}) 12 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /merge/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const bluePostFeed = Rx.Observable 4 | .interval(1000) 5 | .map(n=>`Blue Post Article #${n}`); 6 | 7 | const redHeraldFeed = Rx.Observable 8 | .interval(650) 9 | .map(n=>`Red Herald Article #${n}`); 10 | 11 | const greenTribuneFeed = Rx.Observable 12 | .interval(1650) 13 | .map(n=>`Green Tribune Article #${n}`); 14 | 15 | const config = { 16 | blue:bluePostFeed, 17 | red:redHeraldFeed, 18 | green:greenTribuneFeed 19 | }; 20 | 21 | const colors = ['blue','red','green']; 22 | 23 | Rx.Observable.from(colors) 24 | .mergeMap(color=>config[color]) 25 | .subscribe(a=>console.log(a)); 26 | 27 | // bluePostFeed 28 | // .merge( 29 | // redHeraldFeed 30 | // ) 31 | // .subscribe(a=>console.log(a)); 32 | 33 | // Rx.Observable.of( 34 | // bluePostFeed, 35 | // redHeraldFeed, 36 | // greenTribuneFeed 37 | // ).mergeAll() 38 | // .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /multicast/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const shared = new Rx.BehaviorSubject(-1); 4 | const currencyTicker = Rx.Observable 5 | .interval(1000) 6 | .do(a=>console.log("PINGED API")) 7 | .map(n=>`Currency Info #${n} - [placeholder]`) 8 | // .share() 9 | // .publish() 10 | .multicast(shared) 11 | 12 | currencyTicker 13 | .subscribe(a=>console.log("LEFT WIDGET",a)); 14 | 15 | currencyTicker 16 | .subscribe(a=>console.log("RIGHT WIDGET",a)); 17 | 18 | currencyTicker.connect(); -------------------------------------------------------------------------------- /of/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable.of( 4 | 1,2,3,'Four',5,[],{},[1,2,3] 5 | ).subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rxjs-operators-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel": "^6.23.0", 14 | "babel-cli": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-preset-env": "^1.6.1", 17 | "babel-register": "^6.26.0", 18 | "webpack": "^3.10.0", 19 | "webpack-dev-server": "^2.11.1" 20 | }, 21 | "dependencies": { 22 | "rxjs": "^5.5.6" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /partition/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const [even,odds] = Rx.Observable 4 | .range(1,20) 5 | .partition(n=>n % 2 == 0); 6 | //.subscribe(a=>console.log(a)); 7 | 8 | even.subscribe(a=>console.log("EVEN:",a)); 9 | odds 10 | .map(n=>`ODD: ${n}`) 11 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /pluck/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs' 2 | 3 | const friendsAPI = Rx.Observable 4 | .interval(1000) 5 | .map(i=>({name:`Friend #${i}`, mutualFriends: i * 2 + 1})) 6 | .pluck("mutualFriends") 7 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /race/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const apiA =Rx.Observable 4 | .timer(1500,100) 5 | .map(n=>`API A => ${n}`); 6 | 7 | const apiB = Rx.Observable 8 | .timer(2000,100) 9 | .map(n=>`API B => ${n}`); 10 | 11 | Rx.Observable.race( 12 | apiA, 13 | apiB 14 | ) 15 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /range/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const rangeObservable = Rx.Observable.range(0,16); 4 | rangeObservable 5 | .subscribe(e=>console.log(`Range emitted ${e}`)); -------------------------------------------------------------------------------- /reduce-scan/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .interval(200) 5 | .take(10) 6 | // .reduce((acc,value)=>acc+value,0) 7 | .scan((acc,value)=>acc+value,0) 8 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /redux/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const createStore = (reducer, preloadedState)=>{ 4 | const eventSource = new Rx.BehaviorSubject(preloadedState); 5 | 6 | const scanned = eventSource 7 | .scan(reducer) 8 | .distinctUntilChanged(); 9 | 10 | return { 11 | dispatch(action) { 12 | eventSource.next(action); 13 | }, 14 | subscribe(listener) { 15 | scanned.subscribe(listener); 16 | } 17 | } 18 | }; 19 | 20 | const defaultState = { 21 | todos: ["Write some code!","Play video games!"] 22 | }; 23 | 24 | const reducer = (state = defaultState, action)=>{ 25 | switch (action.type) { 26 | case "ADD_TODO": 27 | let newState = Object.assign({},state); 28 | newState.todos = [...state.todos,action.todo] 29 | return newState; 30 | } 31 | return state; 32 | }; 33 | 34 | const store = createStore(reducer,defaultState); 35 | store.subscribe(a=>console.log(a)); 36 | store.dispatch({type:"ADD_TODO",todo:"LEARN RXJS"}); 37 | store.dispatch({type:"REMOVE_TODO",todo:"LEARN RXJS"}); 38 | store.dispatch({type:"ADD_TODO",todo:"UN-LEARN RXJS"}); -------------------------------------------------------------------------------- /retry/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const buggyAPI = Rx.Observable 4 | .timer(1000) 5 | .do(a=>console.log("You called the buggy API!")) 6 | .do(a=>{throw new Error()}); 7 | 8 | buggyAPI 9 | // .retry(3) 10 | .retryWhen(()=>Rx.Observable.interval(1000)) 11 | .subscribe(a=>console.log(a)) -------------------------------------------------------------------------------- /sample/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | import { fromStdIn } from '../utility'; 3 | 4 | fromStdIn() 5 | .sample( 6 | Rx.Observable.interval(1000) 7 | ) 8 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /single/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .range(0,3) 5 | .single(n=>n % 2 == 0) 6 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /skip/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | import { fromStdIn } from '../utility' 3 | 4 | console.log("INPUT IS OFFICIALLY ACCEPTED IN 2X SECONDS"); 5 | fromStdIn() 6 | // .skip(10) 7 | //.skipWhile(v=>v !== "g") 8 | .skipUntil(Rx.Observable.timer(2000)) 9 | .subscribe(k=>console.log(k)); 10 | -------------------------------------------------------------------------------- /startWith/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | console.info("MADE API REQUEST"); 4 | Rx.Observable 5 | .timer(4000,500) 6 | .map(n=>n+1) 7 | .startWith(0) 8 | .subscribe(a=>console.log("REQUEST COMPLETE:", a)); -------------------------------------------------------------------------------- /take/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | //.range(1,9) 5 | .interval(100) 6 | .takeUntil(Rx.Observable.timer(2000)) 7 | // .takeWhile(n=> n < 7) 8 | // .take(5) 9 | .subscribe(e=>console.log(e)); -------------------------------------------------------------------------------- /throttle/index.js: -------------------------------------------------------------------------------- 1 | import { fromStdIn } from '../utility' 2 | 3 | fromStdIn() 4 | .throttle( 5 | ()=>fromStdIn().filter(key=>key==="p") 6 | ) 7 | // .throttleTime(1000) 8 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /throw/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | Rx.Observable 4 | .throw() 5 | .subscribe({ 6 | next: n => console.log("N value was emitted", n), 7 | error: e => console.log("Entered error state!", e) 8 | }); -------------------------------------------------------------------------------- /timeout/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | import { fromStdIn } from '../utility' 3 | 4 | console.log("Please INPUT your password QUICKLY!!"); 5 | 6 | fromStdIn() 7 | .take(10) 8 | .timeout(2000) 9 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /utility.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | export const fromStdIn = ()=>{ 4 | const stdin = process.stdin; 5 | stdin.setRawMode(true); 6 | stdin.setEncoding('utf-8'); 7 | 8 | const observable = Rx.Observable.fromEvent(stdin,'data'); 9 | observable.subscribe(key=>{ 10 | if (key === '\u0003') { 11 | process.exit(); 12 | } 13 | }) 14 | return observable; 15 | }; 16 | 17 | //fromStdIn().subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack'; 2 | import path from 'path'; 3 | 4 | export default { 5 | entry:{ 6 | fromEvent:'./fromEvent/index.js', 7 | combineLatest:'./combineLatest/index.js' 8 | }, 9 | output:{ 10 | path: path.resolve(__dirname), 11 | publicPath:'/', 12 | filename:'[name]/bundle.js' 13 | }, 14 | resolve:{ 15 | extensions:['.js','.json'] 16 | }, 17 | module:{ 18 | loaders:[{ 19 | test: /\.js/, 20 | use:{ 21 | loader:'babel-loader' 22 | } 23 | }] 24 | } 25 | } -------------------------------------------------------------------------------- /window/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | import { fromStdIn } from '../utility' 3 | 4 | Rx.Observable 5 | .interval(100) 6 | // .window( 7 | // Rx.Observable.interval(1000) 8 | // ) 9 | // .windowCount(10) 10 | // .windowTime(1000) 11 | // .windowToggle( 12 | // fromStdIn().filter(key=>key==="p"), 13 | // ()=>fromStdIn().filter(key=>key==="o"), 14 | // ) 15 | .windowWhen( 16 | ()=>Rx.Observable.timer(1000) 17 | ) 18 | .concatMap(a=>a.toArray()) 19 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /withLatestFrom/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | import { fromStdIn } from '../utility' 3 | 4 | Rx.Observable 5 | .interval(1000) 6 | .withLatestFrom( fromStdIn() ) 7 | .subscribe(a=>console.log(a)); -------------------------------------------------------------------------------- /zip/index.js: -------------------------------------------------------------------------------- 1 | import Rx from 'rxjs'; 2 | 3 | const slowNumberObservable = Rx.Observable.interval(100); 4 | const slowSquareObservable = Rx.Observable.interval(350).map(n=>n*n); 5 | 6 | Rx.Observable.zip( 7 | slowNumberObservable, 8 | slowSquareObservable 9 | ) 10 | .subscribe(a=>console.log(a)); 11 | // slowNumberObservable.subscribe(a=>console.log(a)); 12 | // slowSquareObservable.subscribe(a=>console.log(a)); --------------------------------------------------------------------------------