{"id":15352236,"url":"https://github.com/hufeng/iflux","last_synced_at":"2025-10-09T01:41:26.203Z","repository":{"id":27106950,"uuid":"30574513","full_name":"hufeng/iflux","owner":"hufeng","description":"iflux = immer.js + react.js","archived":false,"fork":false,"pushed_at":"2023-01-03T21:42:37.000Z","size":2713,"stargazers_count":64,"open_issues_count":64,"forks_count":12,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-10-06T19:46:40.615Z","etag":null,"topics":["functional-programming","immer","react","reactive"],"latest_commit_sha":null,"homepage":"http://hufeng.github.io/iflux/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hufeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-10T04:16:09.000Z","updated_at":"2025-07-24T12:05:21.000Z","dependencies_parsed_at":"2022-07-18T03:16:44.737Z","dependency_job_id":null,"html_url":"https://github.com/hufeng/iflux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hufeng/iflux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hufeng%2Fiflux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hufeng%2Fiflux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hufeng%2Fiflux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hufeng%2Fiflux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hufeng","download_url":"https://codeload.github.com/hufeng/iflux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hufeng%2Fiflux/sbom","scorecard":{"id":472213,"data":{"date":"2025-08-11","repo":{"name":"github.com/hufeng/iflux","commit":"97f64de768200ec82faff55fb80e066d171a56fd"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.6,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/8 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":9,"reason":"binaries present in source code","details":["Warn: binary detected: examples/AwesomeApp/android/gradle/wrapper/gradle-wrapper.jar:1"],"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"136 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-r3x4-wr4h-pw33","Warn: Project is vulnerable to: GHSA-876r-hj45-fw7g","Warn: Project is vulnerable to: GHSA-v63x-xc9j-hhvq","Warn: Project is vulnerable to: GHSA-w5q7-3pr9-x44w","Warn: Project is vulnerable to: GHSA-3fjq-93xj-3f3f","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f","Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-832h-xg76-4gv6","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv","Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4","Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653","Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj","Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67","Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w","Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2","Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T14:14:16.602Z","repository_id":27106950,"created_at":"2025-08-19T14:14:16.602Z","updated_at":"2025-08-19T14:14:16.602Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278981517,"owners_count":26079640,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["functional-programming","immer","react","reactive"],"created_at":"2024-10-01T12:09:04.936Z","updated_at":"2025-10-09T01:41:26.173Z","avatar_url":"https://github.com/hufeng.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e I think, I am 🔥🔥🔥\n\n\u003cpre\u003e\n技术也是时尚驱动的，我们常常臣服于时尚,\n面对快速的变化常常让我们局促不安\n开始焦虑，唯恐错过了些什么,怎么打破这种焦虑？\n需要在快速变化得世界里保持清醒，保持独立的思考和认知\n让我们回归到技术的本质, 因为解决了真实的问题，技术才变得有价值\n\u003cstrong\u003e真正牛*的技术，都是静悄悄的跑在线上...\u003c/strong\u003e\n\u003c/pre\u003e\n\n### what is iflux ?\n\n_iflux = immer.js + react.js_\n\na simple state container for React ecosystem.\n\n### Features\n\n- Progressive\n- Light-weight\n- Reactive\n- Predict\n- Scalable\n- Trace Data Flow\n\n[![NPM](https://nodei.co/npm/iflux.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/iflux/)\n\n### Why React?\n\n[React.js](http://facebook.github.io/react/)犹如 Facebook 的文化基因所强调的一样 break things and move fast, 在快速前进中打破了很多我们对于 web 开发的固有认识。\n更厉害的是 React 把这种创新平移到移动开发(React native)实现了 Learn once, Write everywhere.\n\n### React features\n\n1. 强调组件化的开发方式（更高的抽象层次，更好的分离关注点）\n\n2. 声明式的开发风格（更好的表现力）\n\n3. 单向的数据流动（简单可预测）\n\n4. 超高性能的渲染（掌声在哪里？）\n\n5. 最大的创新源于 virtual dom （UI VM）\n\n6. 轻量，可以在现有的系统中快速试错\n\n7. 精确的生命周期，更简单的整合第三方的库(jquery)\n\n### why iflux\n\n因为 React 的定位就是轻量级高效组件式的 view library，但是在我们实际的应用开发工程中不仅仅需要处理 view 的问题，更复杂的是对于状态的控制。\n\n官方的[flux](https://facebook.github.io/flux/docs/overview.html)架构提供了一个很好的针对 React 的架构指导，但是代码量很大。\n\n说到底 flux 就是在解决一个数据流向以及控制状态变化问题。这点 om 确实做的非常出色，\n借助于 Clojure 的数据的特性（1. 数据不可变 2. 持久化数据结构 3.共享数据结构）\n\n在不断的追寻下，immutable.js 出现在了眼前，如获至宝。\n随着对 immutable.js 深入挖掘，发现正好契合了 React 的架构特点，可以使用 Immutable 很好的管理我们的 Store，因为 Immutable 强调值语义，\n能够更好的追踪状态的变化(cursor)且带来了更好的性能。\n\n随着 js 代码量越来越大,我们需要更 safety, scalable 的方式来开发前端，所以我们采用 typescript，但是 immutable 和 ts 配合的还不够好，随着技术的变化，immer.js 这样的小而美的库很好的解决了 js 的值不可变问题，又能很好和 typescript 配合起来\n\n### 保持简单 -- KISS\n\n![iflux-flow](https://raw.githubusercontent.com/hufeng/iflux/4.0/screencast/iflux-flow.png)\n\n### Getting started\n\n```shell\nnpm install iflux --save\n```\n\nreact-native environment\n\n```shell\nnpm install iflux --save\nnpm install babel-plugin-iflux --save-dev\n```\n\n//.babelrc\n\n```javascript\n{\n  \"plugins\":[[\"iflux\",\"reactnative\": true]]\n}\n```\n\n### simple example\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createStore, useRelax, Provider } from 'iflux';\n\n// create state container\nconst store = createStore({\n  state: {\n    text: '你一抹微笑如茉莉^_^',\n    count: 1\n  }\n});\n\n// relax container\nfunction Greeting() {\n  const [text, count, setState] = useRelax(['text', 'count']);\n\n  // mutation\n  const inc = () =\u003e\n    setState(state =\u003e {\n      state.count++;\n    });\n\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{text}\u003c/span\u003e\n      \u003ca href='javascript:void(0);' onClick={inc}\u003e\n        +{count}\n      \u003c/a\u003e\n    \u003c/div\u003e\n  );\n}\n\n// create Page\nfunction App() {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cGreeting /\u003e\n    \u003c/Provider\u003e\n  );\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('app'));\n```\n\n### 更多 demo 在线体验\n\n[SmileDemo](https://codesandbox.io/embed/8ljj0kvw6j)\n\n[Counter](https://codesandbox.io/embed/zl3jqo1lm)\n\n[todo](https://codesandbox.io/embed/ny43wyw9j)\n\n### page service\n\n在项目中，我们遵循 page service 的划分理念，即每个页面都是一个独立的前端的服务\n\n每个页面有自己独立的 store, action, ui 组件\n\n在需要跨页面的数据共享和数据更新的场景中，在整个系统的顶层使用\u003cRootProvider\u003e进行包装\n\n就可以解决此场景下的问题\n\n建议目录结构:\n\n```text\n/tmp/awesome\n❯ tree -L 2\n.\n├── good-list\n│   ├── action.ts\n│   ├── component\n│   ├── index.ts\n│   ├── store.ts\n│   └── webapi.ts\n├── index\n│   ├── action.ts\n│   ├── component\n│   ├── index.ts\n│   ├── store.ts\n│   └── webapi.ts\n├── index.ts\n├── mine\n│   ├── action.ts\n│   ├── component\n│   ├── index.ts\n│   ├── store.ts\n│   └── webapi.ts\n├── order-confirm\n│   ├── action.ts\n│   ├── component\n│   ├── index.ts\n│   ├── store.ts\n│   └── webapi.ts\n├── order-list\n│   ├── action.ts\n│   ├── component\n│   ├── index.ts\n│   ├── store.ts\n│   └── webapi.ts\n├── setting\n│   ├── action.ts\n│   ├── component\n│   ├── index.ts\n│   ├── store.ts\n│   └── webapi.ts\n└── shopping-cart\n    ├── action.ts\n    ├── component\n    ├── index.ts\n    ├── store.ts\n    └── webapi.ts\n\n14 directories, 29 files\n```\n\n## Domain Object\n\n### Provider\n\n连接当前的页面的组件 和当前的页面的数据容器(store)，在 provider 内部将 store 绑定在当前的页面上下文\n\n方便 relax 注入数据源, Provider 提供了两个生命周期的回调 onMounted, willUnmout 方便进行一些全局操作\n\n```javascript\nimport { Provider } from 'iflux';\n\n// 创建一个页面的数据store\nconst store = createStore({ state: { text: 'hello world' } });\n\nfunction App() {\n  const onMounted = store =\u003e {\n    store.dispatch('onInit');\n  };\n\n  const willUnmount = store =\u003e {\n    console.log('unmounted');\n  };\n\n  return (\n    \u003cProvider store={store} onMounted={onMounted} willUnmount={willUnmount}\u003e\n      \u003cHello /\u003e\n    \u003c/Provider\u003e\n  );\n}\n```\n\n### useRelax\n\n使用 React@16.8 的新特性 React hook, 以一种声明式的风格获取 store 中的数据， 以及更变 store 中的 state 的方式\n\n```javascript\nimport React from 'react';\nimport { useRelax } from 'iflux';\n\nfunction Hello() {\n  const { id, title, content } = useRelax(['id', 'title', 'content']);\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e{id}\u003c/div\u003e\n      \u003cdiv\u003e{title}\u003c/div\u003e\n      \u003cdiv\u003e{content}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nuseRelax 数组中的参数风格是对应的数据的路径\n\n假设我们的 store 中的 state 数据结构是\n\n```js\ncreateStore({\n  state: {\n    list: [{ id: 1, title: 'hello iflux', conent: 'welcome' }],\n    motto: 'build tools for human',\n    nest: { user: { where: 'nanjing' } }\n  }\n});\n```\n\n1. 假如想获取 list 中的，index 为 0 的 title\n\n   对应的路径是 ['list', 0, 'title'] 或者 更简略是 'list.0.title'\n\n   例如:\n\n   ```javascript\n   const { title } = useRelax(['list.0.title']);\n   const { title } = useRelax([['list', 0, 'title']]);\n   ```\n\n   为啥是 const {title}, useRelax 在 parse 我们的数据路径是默认以最后一个路径为返回对象的 key\n\n   那如果我想自定义这个字段 怎么办呢？那就以对象的方式来\n\n   ```javascript\n   const { a } = useRelax([{ a: 'list.0.title' }]);\n   ```\n\n2. 如果想获取 motto 也是以路径的方式\n\n   ```javascript\n   const { motto } = useRelax(['motto']);\n   //自定义名字\n   const { A } = useRelax([{ A: 'motto' }]);\n   ```\n\n3. 获取对象的嵌套路径, 获取 where\n\n```javascript\nconst { where } = useRelax(['nest.user.where']);\n//自定义\nconst { there } = useRelax([{ there: 'nest.user.where' }]);\n```\n\n\u003e **所以说了这么多，其实就一条规则，以数据路径的方式来获取数据， 支持自定义最终的返回值得名称**\n\n### Relax\n\nRelax 是 useRelax 的降级模式，在低版本的不支持 React 的 hook 特性的 React class component 中，使用 Relax 这个 decorator 做到声明式的数据依赖注入\n\n```typescript\nimport React from 'react';\nimport { Relax, TRelaxProps } from 'iflux';\n\n// 参数和useRelax完全一致的数据路径风格\n@Relax(['list.0.title', 'motto', 'nest.user.where'])\nclass Hello extends React.Component {\n  relaxProps = {} as TRelaxProps\u003c{\n    title: string;\n    motto: string;\n    where: string;\n  }\u003e;\n\n  render() {\n    const { title, motto, where } = this.relaxProps;\n\n    return (\n      \u003cdiv\u003e\n        \u003cdiv\u003e{id}\u003c/div\u003e\n        \u003cdiv\u003e{title}\u003c/div\u003e\n        \u003cdiv\u003e{content}\u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n在 Relax 或者 useRelax 中不需要声明会自动注入改变 store 的 state 的方法，setState 和 dispatch\n\n```javascript\nfunction Hello() {\n  const { title, setState, dispatch } = useRelax(['list.0.title']);\n\n  //mutation\n  const onChange = () =\u003e\n    setState(state =\u003e {\n      state.list[0].title = 'hello iflux ++';\n    });\n\n  return (\n    \u003cdiv\u003e\n      \u003ca href={'javascript:void(0);'} onClick={onChange}\u003e\n        setState\n      \u003c/a\u003e\n      {title}\n      \u003ca href='javascript:void(0);' onClick={() =\u003e dispatch('change-title')}\u003e\n        dispatch\n      \u003c/a\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\ndispatch VS setState\n\ndispatch(msg: string, params?: any) 会自动的从 store 中寻找 action 作为数据更新，更好的 trace\nsetState(cb: (state) =\u003e void) 提供一种快速便捷修改 store 中 state 的方式，比如 form 中 field 的更新\n\n\u003e 优先使用 dispatch 进行数据更新\n\n### Action\n\n提供对 store 中数据修改的抽象\n\n```javascript\n// action.js\n// 在这个文件定义所有的action\nimport { action } from 'iflux';\n\nexport const changeTitle = action('changeTitle', store =\u003e {\n  store.setState(state =\u003e {\n    state.list[0].title = 'hello iflux ++';\n  });\n});\n\n//store.js去绑定所有的action\nimport { createStore } from 'iflux';\nimport * as action from './action';\n\nexport default createStore({\n  action,\n  state: {\n    list: [{ id: 1, title: 'hello iflux', conent: 'welcome' }],\n    motto: 'build tools for human',\n    nest: { user: { where: 'nanjing' } }\n  }\n});\n```\n\n这样 relax 在 dispatch 的时候，就会从 store 中找寻那个 action 可以匹配 dispatch 的 msg 然后进行处理\n\n### QL\n\nQL = query language，一种简单的 reactive 的 DSL，类型 vue 的 compute 和 Redux 中的 selected\n\n使用 QL 的抽象主要是对数据之间的关系进行抽象，将数据分为两种一个是 source data(源数据), 一种是 derive data(派生数据)\n就是基于源数据和某个规则计算出来的数据， QL 就是封装派生数据，最后一个参数是计算规则，前面的参数全是源数据的路径\n\n实际在前端有大量的这样的场景，比如，计算购物车的总金额，total = [(sku price * buy num)..... ]\n当购买的数量还是单价发生了变化，total 就应该计算一次，\n\n必须 excel，A1-A50 都是学生的成绩，A51 显示的是总分，对于 A51 来说就是一个规则, :=sum(A1, A50)只要 A1-A50 任何一行发生的变化\nA51 都是自动重新计算一次\n\n这样的好处，使我们的逻辑更加的清晰，我们通常只要关注源数据就可以了，\n以及 store 中存放 state 都是源数据。\n\n我们的 QL 会在 Relax 或者 useRelax 声明的依赖中自动计算，也许你会问，这样不会导致计算量变大吗？\n\n这就是我们用 immutable 数据结构的优势，可以知道源数据有没有发生变化，可以方便的做 cache。\n\n```javascript\nimport { QL } from 'iflux';\n\nconst helloQL = QL([\n  //依赖的数据路径\n  // store中的state的title数据路径\n  'list.0.title',\n  //store中的state的where的数据路径\n  'nested.user.where',\n\n  /**\n   * transform function\n   * title =\u003e list.0.title的值\n   * where =\u003e nested.user.where的值\n   * 然后一个返回值, 当依赖的数据路径对应的值任何一个发生\n   * 了改变，改函数都会自动重新计算一次\n   */\n  (title, where) =\u003e {\n    // computed\n    return `${title} ++ ${where}`;\n  }\n]);\n\n// QL支持嵌套\nconst worldQL = QL([\n  helloQL,\n  'motto',\n  (hello, motto) =\u003e `${hello} +++ ${motto}`\n]);\n```\n\n```typescript\nimport { helloQL, worldQL } from './ql';\n\nfunction Hello() {\n  const { helloQL } = useRelax([{ helloQL }]);\n\n  return \u003cdiv\u003e{helloQL}\u003c/div\u003e;\n}\n\n@Relax([{ worldQL }])\nclass World extends React.Component {\n  relaxProps = {} as TRelaxProp\u003c{ worldQL: string }\u003e;\n  render() {\n    return \u003cdiv\u003e{this.relaxProps.worldQL}\u003c/div\u003e;\n  }\n}\n```\n\n### EL\n\nEL = Effect language, 对 sideEffect 的抽象, 和 QL 和类似但是不关心返回值，\n\n主要就是监控源数据或者某个 ql 的值是不是发生变化，然后做一些额外的事情\n\n比如发送 ajax，\n\nEL 不支持嵌套，因为不保证有返回值 ^\\_^\n\n```js\nimport { EL } from 'iflux';\n\nconst helloEL = EL([\n  //数据路径\n  'list.0.title',\n  helloQL,\n\n  (title, helloQL) =\u003e {\n    //send a ajax\n  }\n]);\n\n// 执行的容器在store中\ncreateStore({\n  el: {helloEL}\n  state: {}\n})\n```\n\n### RootProvider, createRootStore\n\n虽然我们的开发按照 page-service 的方式来进行拆分，保证清晰\n\n但是在整个系统中常常需要在不同的页面进行数据的共享和更新\n\n怎么解决跨页面的数据问题呢？\n\n这个时候就需要 RootProvider, 这样就可以建立一个全局的上下文，在系统的顶层比如：\n\n```javascript\nReactDOM.render(\n  \u003cRootProvider\u003e\n    \u003cRouter\u003e\n      \u003cRoute path='/' component={Blog} /\u003e\n      \u003cRoute exact path='/blog-new' component={BlogCreate} /\u003e\n      \u003cRoute exact path='/blog/:id' component={BlogDetail} /\u003e\n    \u003c/Router\u003e\n  \u003c/RootProvider\u003e,\n  document.getElementById('app')\n);\n```\n\n随着页面的加载渐进式的把页面的数据共享给 RootProvider,方便个页面的获取\n\n比如一个业务流程，A -\u003e B -\u003e C, 按照我们的抽象 A, B, C 是三个页面\n\n我们可以在 B 中获取 A 数据， 在 C 中获取 A，B 数据，\n\n**如果在 A 中获取 B，C 的数据则可能出现错误**\n\n怎么渐进式的共享\n\n1. RootProvider 放在顶层\n\n2. 各个页面的 store 设置 ns(namespace)避免数据的二义性\n\n3. 如果需要全局的数据共享可以使用 createRootStore\n\n```javascript\n  //page-a.js\n  const store = createStore({\n    ns: 'page-a'\n    state: {}\n  })\n\n  function PageA() {\n    return (\n      \u003cProvider store={store}\u003e\n       \u003cPage/\u003e\n      \u003c/Provider\u003e\n    );\n  }\n\n  //page-b.js\n   const store = createStore({\n    ns: 'page-b'\n    state: {}\n  })\n\n  function PageB() {\n    return (\n      \u003cProvider store={store}\u003e\n       \u003cPage/\u003e\n      \u003c/Provider\u003e\n    );\n  }\n\n  //入口index.js\n\n  function Index() {\n    return (\n      \u003cRootProvider\u003e\n        \u003cPageA/\u003e\n        \u003cPageB/\u003e\n      \u003c/RootProvider\u003e\n    )\n  }\n```\n\n那怎么获取共享数据呢？\n\nrelax 大法，在数据路径的开始@上父页面的 namespace，\n\n如：\n\n加入父页面的 store 设置的 ns 是, 'shoppingCart',\n\n```js\ncreateStore({\n  ns: 'shoppingCart',\n  state: {\n    list: [{ id: 1, name: 'test商品', price: 0.01 }]\n  }\n});\n```\n\n子页面想获取价格:\n\n```javascript\nfunction Price() {\n  const { price } = useRelax(['@shoppingCart.list.0.price']);\n\n  return \u003cdiv\u003e{price}\u003c/div\u003e;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhufeng%2Fiflux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhufeng%2Fiflux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhufeng%2Fiflux/lists"}