{"id":19782442,"url":"https://github.com/steadylearner/redux_observable_and_rxjs","last_synced_at":"2026-02-24T19:37:31.650Z","repository":{"id":96186267,"uuid":"140735993","full_name":"steadylearner/Redux_Observable_and_Rxjs","owner":"steadylearner","description":"Rxjs and Redux_Observable","archived":false,"fork":false,"pushed_at":"2018-07-15T00:59:55.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T02:32:55.621Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steadylearner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-12T16:03:19.000Z","updated_at":"2019-08-28T15:30:30.000Z","dependencies_parsed_at":"2023-03-23T08:48:37.764Z","dependency_job_id":null,"html_url":"https://github.com/steadylearner/Redux_Observable_and_Rxjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FRedux_Observable_and_Rxjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FRedux_Observable_and_Rxjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FRedux_Observable_and_Rxjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FRedux_Observable_and_Rxjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steadylearner","download_url":"https://codeload.github.com/steadylearner/Redux_Observable_and_Rxjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241113290,"owners_count":19911859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T06:05:09.694Z","updated_at":"2025-10-25T02:25:02.018Z","avatar_url":"https://github.com/steadylearner.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux_Observable_and_Rxjs\n\nJust to save what I learn from them.\n\n## Operators\n\n* [tap -\u003e to debug, side effects etc(console, alert etc), doesn't affect event stream]\n* [timer, takeuntil, takelast, take] \n* [delay] \n* [retry, catchError]\n* [debounce \u003c-\u003e throttle, distintUntilChanged, switch(Map), mergemap, map, mapto] \n* [combineLaetst(combine streams(observable) from two distint elements, similar to use zip in this case]\n* [finally, endWith \u003c-\u003e startWith, subsrcibe, unsubscribe]\n* [scan(similar to javascript array reduce)]\n* [switchMap -\u003e take only last observables available]\n* [takeUntil -\u003e unsubscribe observables that doesn't have unsubcribe method, used instead of unsubscribe, assert with value]\n* [takeWhile -\u003e listen to observable while conidtion is ture, assert with conditional statement]\n* [zip -\u003e pair different observables in sequence, new observable array with values of them in sequence]\n* [forkjoin -\u003e similar to zip but wait for the api to complete, useful for using two different async api]\n* [catchError -\u003e similar to handle error in promise]\n* [retry -\u003e used for error handle with catchError, execute code until specific time of error happens again]\n\n* combineLatest and zip compare\n\n`\nendpoint_stream.combineLatest(id_stream) / only one of them is necessary -\u003e map(data =\u003e makeRequest(data[0], data[1])\nendpoint_stream.zip(id_stream) / both of them are required -\u003e map(data =\u003e makeRequest(data[0], data[1])\n`\n\n* zip and forkJoin compare(forkJoin should be used with caution, similar to Promise.all), -\u003e https://www.learnrxjs.io/operators/combination/forkjoin.html\n\n\n`\nex) zip(Rx.observable.of([1, 2, 3]), Rx.observable.of(4, 5, 6)), forkJoin(Rx.observable.of([1, 2, 3]), Rx.observable.of(4, 5, 6).delay(2000)) \n`\n\n\n* catchError and Retry \n\n`\novservable.catch((e) =\u003e errorHandle(e)).retry(2)\n`\n\n\n\n## Rxjs Subject(relevant to hot cold observable, connect(), multicast etc)\n\n * It can be used in the same way with Observables, but it has more features such as code below\n * It can be used operator multicast() -\u003e That pass values to multiple subscribers except multiple same side effects\n\n___\nconst subject = new Rx.subject()\n\nconst subA = subject.subsrcibe((val) =\u003e from subA: print(val));\nconst subB = subject.subsrcibe((val) =\u003e from subB: print(val));\n\nsubject.next(\"First Value\")\nsetTimeout(() =\u003e {\n   subject.next(\"Next Value\")\n}, 1000)\n\n-\u003e from subA: First Value, from subB: First Value =\u003e from SubB: Next Value, from subB: Next Value\n \n const observable = Rx.observable.fromEvent(document, \"click\");\n \n const click = observable.do( _ =\u003e print(\"click one time\"));\n \n const subject = click.multicast(() =\u003e new Rx.subject());\n \n const subA = subject.subscribe( c =\u003e print(\"subA: \", c.timeStamp));\n const subB = subject.subscribe( c =\u003e print(\"subB: \", c.timeStamp));\n \n subject.connect(); -\u003e subA, SubB -\u003e show same value\n \n-\u003e Click One Time, subA: ${timeStamp}, subB: ${timeStamp} =\u003e  Click One Time, subA: ${otherTimeStamp}, subB: ${otherTimeStamp} \n (show side effect message just once for each event) \n___\n\n\n## RXJS link(Some are deprecated, but still useful, compare them with official api)\n\n * https://rxjs-dev.firebaseapp.com/api/index/from\n * https://www.learnrxjs.io/\n * https://angularfirebase.com/lessons/rxjs-quickstart-with-20-examples/#Excellent-Resources\n * http://rxmarbles.com/\n * https://www.sitepoint.com/rxjs-functions-with-examples/\n \n## Redux Observable\n(Learn rxjs first, Configuration and use with existing code base is not easy, side effects affect functional programming?)\n\n * https://redux-observable.js.org/docs/ -\u003e official site(Need to have more examples)\n \n ### Blog Posts\n \n * https://medium.com/@benlesh/redux-observable-ec0b00d2eb52\n * https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522\n * https://medium.com/@mutebg/learn-rxjs-by-examples-c56bf481bec2\n * https://medium.com/@mohandere/rxjs-5-in-5-minutes-1c3b4ed0d8cc\n\n ### Video Courses\n \n\n \n ### Practice\n \n * https://medium.com/@mutebg/learn-rxjs-by-examples-c56bf481bec2\n \n### Object\n\n 1. delay for specific time and cancel when data fetch end(timer + takeuntil), cancel next element with autoplay(takeuntil)\n 2. optimization of async search(debounce, distinUntilChanged, switchMap, takeuntil, delay, retry, takeUntil, catchError)\n \n### Next \n\n 1. Learn graphql and backend and Use it with rxjs and redux\n 2. Refactor app and make not found message at first render and refresh, delay showing loading component  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Fredux_observable_and_rxjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteadylearner%2Fredux_observable_and_rxjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Fredux_observable_and_rxjs/lists"}