{"id":16880120,"url":"https://github.com/mlhiter/mini-redux","last_synced_at":"2025-03-20T02:32:31.470Z","repository":{"id":222854739,"uuid":"758552180","full_name":"mlhiter/mini-redux","owner":"mlhiter","description":"to build a mini redux.","archived":false,"fork":false,"pushed_at":"2024-02-17T14:47:53.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T05:24:56.530Z","etag":null,"topics":["mini","redux","tutorial"],"latest_commit_sha":null,"homepage":"","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/mlhiter.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":"2024-02-16T15:09:22.000Z","updated_at":"2024-02-17T15:02:45.000Z","dependencies_parsed_at":"2024-11-25T09:15:25.296Z","dependency_job_id":null,"html_url":"https://github.com/mlhiter/mini-redux","commit_stats":null,"previous_names":["mlhiter/mini-redux"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlhiter%2Fmini-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlhiter%2Fmini-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlhiter%2Fmini-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlhiter%2Fmini-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlhiter","download_url":"https://codeload.github.com/mlhiter/mini-redux/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244538629,"owners_count":20468754,"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":["mini","redux","tutorial"],"created_at":"2024-10-13T15:57:21.670Z","updated_at":"2025-03-20T02:32:31.450Z","avatar_url":"https://github.com/mlhiter.png","language":"JavaScript","readme":"## Tutorial\n\nlearn from this website-\u003e[build your own redux](https://nytimes.github.io/oak-byo-react-prosemirror-redux/post/build-your-own-redux/)\n\nThis is a tutorial project.\n\nBuild your own redux.\n\nAnd then I'll implement other features that isn’t implemented in the tutorial.\n\n### Principle\n\n#### 1，Basic knowledge\n\nredux维护一个store，store里存储数据。\n\n怎么改变数据呢？-\u003e通过触发action并用reducer计算出新状态。\n\n我们通过调度函数(dispatch)来书写调度逻辑；\n\n通过订阅函数（subscribe）来订阅监听器（监听器就是在每次状态更新后都会调用的函数）；\n\n通过获取状态函数（getState）来获取最新的状态。\n\n**Advanced：**\n\n增强函数(enhancer)：最典型的就是applyMiddleware，这个函数对dispatch进行封装，达到中间件的效果。\n\n#### 2，The exposed api\n\n##### 2.1 createStore\n\n```js\ncreateStore(reducer,enhancer)=\u003e{\n return {\n   getState,\n   dispatch,\n   subscribe\n } \n}\n```\n\n- 参数\n  - reducer：(prevState,action)=\u003enewState。这是一个定义更新数据逻辑的函数。\n  - enhancer：包裹器函数，用来增强redux能力，比如最常见的**applyMiddleware** 来给redux添加中间件。\n- 返回值：store对象\n  - getState：()=\u003estate，返回最新状态值。**获取函数**，用来获取最新的state值。\n  - dispatch：(action)=\u003evoid，接收action命令通过reducer得到newState并更新现有state（**同时执行所有监听器函数**）。**调度函数**，用来更新state值。\n  - subscribe：(listener)=\u003evoid，接收监听函数listener。**订阅函数**，注册监听器到redux上，在每一次状态更新之后都会执行。\n\n##### 2.2 applyMiddleware\n\n```js\napplyMiddleware(...middlewares){\n  return {\n    ...store,\n    dispatch\n  }\n}\n```\n\n- 参数\n  - …middlewares：n个中间件函数\n    - middleware({getState,dispatch})=\u003e(next)=\u003e(action)=\u003e{…some actions}\n- 返回值\n  - store对象解构\n  - dispatch：这里的dispatch是middleware中间件包裹处理后的dispatch\n\n#### 3，The used knowledge\n\nclosure;\n\ncompose function;\n\nthat’s all we need to know.😀\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlhiter%2Fmini-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlhiter%2Fmini-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlhiter%2Fmini-redux/lists"}