{"id":19317604,"url":"https://github.com/queeniecplusplus/react_flux","last_synced_at":"2026-05-12T20:41:33.431Z","repository":{"id":104588431,"uuid":"279203173","full_name":"QueenieCplusplus/React_flux","owner":"QueenieCplusplus","description":"React 的資料流架構模式","archived":false,"fork":false,"pushed_at":"2020-07-13T05:46:07.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-06T04:23:34.112Z","etag":null,"topics":["es5-javascript","flux","flux-architecture","flux-pattern","reactjs"],"latest_commit_sha":null,"homepage":"https://github.com/QueenieCplusplus/QuickGoThru/blob/master/README.md#react","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/QueenieCplusplus.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":"2020-07-13T03:44:10.000Z","updated_at":"2020-07-13T05:46:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"5c708790-b8c1-46df-9053-1ca3b8de99b9","html_url":"https://github.com/QueenieCplusplus/React_flux","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/QueenieCplusplus%2FReact_flux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_flux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_flux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QueenieCplusplus%2FReact_flux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QueenieCplusplus","download_url":"https://codeload.github.com/QueenieCplusplus/React_flux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240420940,"owners_count":19798501,"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":["es5-javascript","flux","flux-architecture","flux-pattern","reactjs"],"created_at":"2024-11-10T01:15:39.216Z","updated_at":"2026-05-12T20:41:28.405Z","avatar_url":"https://github.com/QueenieCplusplus.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React flux\nReact 的單向資料流架構模式\n\n# 3 Core Components\n\n建議將這些元件關注在分離，可做單元測試。\n\n* Model, store 儲存 (商業邏輯與資料的互動)\n\n* Controller, dispatch 分配器為應用程式的中樞。算是種單例 Singleton。\n （利用 Action 介面定義分配器, Action 也可視為應用程式中的領域特定語言 domain-specific-language）\n\n* View, view 視圖 (render 渲染應用程式的元件樹)\n\n\n     \n                                                                          \n                                                                            \n                                                                           \n                  UI 的每一個動作會送到分配器。                          \n                  它雖然不是核心元件，但構成分配器的                             分配器於資料儲存中，\n                  領域定義語言。（使用者動作被翻譯成分配器動作）                   註冊回呼函式，\n                  例如：新增、刪除、修改。                                     分配器也管理依賴。\n            \n                  \n                              Action   ------\u003e   Dispatcher   ------\u003e   callbacl\n\n                                |                                           |\n                                |                                           V\n\n        Web API ------\u003e    Action Creator                                 Store    封裝商業邏輯與應用程式資料的互動，沒有 setter，新增通過資料儲存的變更事件送回應用程式，更新則通過分配器來到 store。\n\n                                |                                           |\n                                |                                           V\n\n                               button                                    onChange(Event){\n                               input     ------     Views      \u003c------          \n                                                                        return{};\n                                                                        }\n                                                                        \n \n ![flux](https://static.bookstack.cn/projects/reactjs101-zh-tw/Ch07/images/flux-simple-diagram.png)\n \n\n// UI Action -\u003e Dispatcher\n       \n        var App = React.createClass({\n\n           // Action\n           AppAction: {\n\n               save: function(){},\n               delete: function(id){},\n               update: function(id){},\n               get: function(res){}\n\n           },\n\n           // UI Action -\u003e Dispatcher\n           clickHandler: function(){\n\n               // onSave is a Dispather\n               this.props.onSave(this.state.id);\n\n           },\n\n           render: function(){\n\n               return(\n\n                   // onClick = {this.method} , this is bind html event to UI action to this class\n                   \u003cdiv\u003e\n                       \u003cbutton onClick={this.clickHandler}\u003e\n                           Save Info Now\n                       \u003c/button\u003e\n                   \u003c/div\u003e\n\n               );\n\n           }\n\n       });\n\n\n// View -\u003e UI Action\n\n     var UIController = React.createClass({\n\n         render: function(){\n\n             var props = merge(\n\n                 {}, this.state.app, {onSave = this.saveHandler};\n\n             );\n\n             return App(props);\n\n         }\n\n     });\n\n// Dispatcher -\u003e Store\n\n     Dispatcher.register(function(payload){\n\n         switch(payload.actionType){\n             case AppConstants.Record: AppStore.save(payload.res);\n         }\n\n     });\n\n// Store -\u003e Event -\u003e View\n\n     AppStore.prototype.save = function(res){\n         this.emitChange();\n     }\n     \n     \n     var UI= React.createClass({\n     \n     \n         changeHandler: function(){\n\n            AppStore.listout(function(id){\n            \n            });\n\n         },\n\n         componentDidMount: function(){\n\n            AppStore.addChangeListener(this.changeHandler);\n\n         },\n\n         componentWillUnMount: function(){\n\n            AppStore.removeChangeListener(this.changeHandler);\n\n         }     \n     \n     })\n                                                                        \n                                                                        \n  # Ref Doc\n  \n  https://www.bookstack.cn/read/reactjs101-zh-tw/Ch07-react-flux-introduction.md\n  \n  https://www.coder.work/article/5253263\n                                                                        \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Freact_flux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueeniecplusplus%2Freact_flux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueeniecplusplus%2Freact_flux/lists"}