{"id":20641191,"url":"https://github.com/jimmytai/react-blocbuilder","last_synced_at":"2025-08-08T13:18:07.051Z","repository":{"id":41676681,"uuid":"254183309","full_name":"JimmyTai/react-blocbuilder","owner":"JimmyTai","description":"BlocBuilder is a component which is like Flutter StreamBuilder. This component help you to use BLoC pattern in react.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:59:28.000Z","size":4689,"stargazers_count":1,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-24T16:37:04.977Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/JimmyTai.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}},"created_at":"2020-04-08T19:37:48.000Z","updated_at":"2020-04-14T05:18:38.000Z","dependencies_parsed_at":"2023-02-05T04:15:41.420Z","dependency_job_id":null,"html_url":"https://github.com/JimmyTai/react-blocbuilder","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/JimmyTai%2Freact-blocbuilder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimmyTai%2Freact-blocbuilder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimmyTai%2Freact-blocbuilder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JimmyTai%2Freact-blocbuilder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JimmyTai","download_url":"https://codeload.github.com/JimmyTai/react-blocbuilder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242692345,"owners_count":20170228,"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-16T15:34:26.059Z","updated_at":"2025-03-09T12:53:51.765Z","avatar_url":"https://github.com/JimmyTai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-blocbuilder\n\n\u003e BlocBuilder is a component which is like Flutter StreamBuilder. This component can help you to use BLoC pattern in react.\n\n[![NPM](https://img.shields.io/npm/v/react-blocbuilder.svg)](https://www.npmjs.com/package/react-blocbuilder) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Tutorial\nYou can find a Chinese tutorial in the [Medium article](https://medium.com/@jimmytai0315/%E5%9C%A8react%E4%B8%AD%E6%90%AD%E9%85%8Dhook%E4%BD%BF%E7%94%A8bloc-pattern-20c7f1ce7063).\n\n## Live Demo\nhttps://jimmytai.github.io/react-blocbuilder/\n\n## Install\n\n```bash\nnpm install react-blocbuilder\n\nor\n\nyarn add react-blocbuilder\n```\n\n## Usage\n\n - BLoC Class\n\n```ts\n  import { Subscription, BehaviorSubject, Observable } from  'rxjs';\n  // 引入RxJS庫\n  // Subscription是用來管理資料流\n  // BehaviorSubject是一個廣播資料流，可以有預設數值，通常用來儲存狀態\n  // Observable，可以利用create創建一個流，通常可以將API包在裡面\n\n  export class DataBloc {\n\t// 用來管理資料流\n\t_disposables = new  Subscription();\n\n\t// 資料儲存在這\n\tlist = new  BehaviorSubject([]);\n\n\t// 當頁面關閉會呼叫，銷毀所有的訂閱\n\tdispose() {\n\t  this._disposables.unsubscribe();\n\t}\n\n\tgetData() {\n\t  // 模擬一支API用RxJS包裝，通常將同一類型的API寫在另一個js或ts裡\n\t  const  observable =\n\t\tObservable.create(async  subscriber  =\u003e {\n\t\t  try {\n\t\t\tawait  new  Promise((resolve, reject) =\u003e {\n\t\t\t  setTimeout(() =\u003e  resolve(), 2000);\n\t\t\t});\n\t\t\tsubscriber.next(['data_01', 'data_02']);\n\t\t\tsubscriber.complete();\n\t\t  }\n\t\t  catch (e) {\n\t\t\tsubscriber.error(e);\n\t\t  }\n\t\t});\n\n\t  // 呼叫API，並訂閱資料流\n\t  const  it = observable.subscribe({\n\t\tnext:  data  =\u003e {\n\t\t  // 當API成功後會傳回data，更新list這個BehaviorSubject，\n\t\t  // 有訂閱這個流的會收到通知，也可以透過getValue()獲取\n\t\t  // 最新的狀態\n\t\t  this.list.next(data);\n\t\t},\n\t\terror:  err  =\u003e {\n\t\t  // 當API失敗，可以做例外處理\n\t\t},\n\t  });\n\t  // 將這個訂閱加到disposables中，集中管理\n\t  this._disposables.add(it);\n    }\n  }\n```\n\n- React Component\n\n```ts\n\n  import  React, { useRef, useEffect } from  'react'\n  import { DataBloc } from  './data_bloc';\n  import { BlocBuilder } from  'react-blocbuilder'\n\n  const  App = () =\u003e {\n\tconst  bloc = useRef(new  DataBloc());\n\n\tuseEffect(() =\u003e {\n\t  const  _bloc = bloc.current;\n\t  return () =\u003e {\n\t\t_bloc.dispose();\n\t  };\n\t}, []);\n\n\treturn (\n\t  \u003cdiv  style={{ margin:  '20px 20px' }}\u003e\n\t\t\u003ch1\u003eBlocBuilder Demo\u003c/h1\u003e\n\t\t\u003cBlocBuilder\n\t\t  // \n\t\t  initialValue={bloc.current.list.getValue()}\n\t\t  subject={bloc.current.list}\n\t\t  builder={snapshot  =\u003e {\n\t\t\treturn (\n\t\t\t  \u003cp\u003e{JSON.stringify(snapshot.data)}\u003c/p\u003e\n\t\t\t);\n\t\t  }}\n\t\t/\u003e\n\t\t\u003cbutton  onClick={() =\u003e bloc.current.getData()}\u003eGet Data\u003c/button\u003e\n\t\t\u003cbutton  onClick={() =\u003e  bloc.current.list.next([])}\u003eClear Data\u003c/button\u003e\n\t  \u003c/div\u003e\n\t);\n  }\n  \n  export  default  App\n\n```\n\n  \n\n## License\n\nMIT License\n\nCopyright (c) 2020  [JimmyTai](https://github.com/JimmyTai).\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the “Software”), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmytai%2Freact-blocbuilder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjimmytai%2Freact-blocbuilder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimmytai%2Freact-blocbuilder/lists"}