{"id":16293756,"url":"https://github.com/zhaoqize/react-webpack-dig","last_synced_at":"2025-06-12T01:04:51.963Z","repository":{"id":79007829,"uuid":"64657633","full_name":"zhaoqize/react-webpack-dig","owner":"zhaoqize","description":"react+redux+(react-redux)的探究","archived":false,"fork":false,"pushed_at":"2017-02-15T12:35:54.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-12T01:04:45.802Z","etag":null,"topics":[],"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/zhaoqize.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":"2016-08-01T10:19:11.000Z","updated_at":"2017-02-15T12:14:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0d1322f-fb59-43eb-9a97-19bf1e23b403","html_url":"https://github.com/zhaoqize/react-webpack-dig","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zhaoqize/react-webpack-dig","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoqize%2Freact-webpack-dig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoqize%2Freact-webpack-dig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoqize%2Freact-webpack-dig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoqize%2Freact-webpack-dig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhaoqize","download_url":"https://codeload.github.com/zhaoqize/react-webpack-dig/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoqize%2Freact-webpack-dig/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259374730,"owners_count":22847856,"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-10-10T20:12:16.213Z","updated_at":"2025-06-12T01:04:51.942Z","avatar_url":"https://github.com/zhaoqize.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 你真弄懂了react+redux的计时器例子么(未使用react-redux)\n如果你弄懂了，那你应该在大脑中具备一条数据流。\n\n1.鼠标点击+,触发click事件。告诉`Action`做**ADD**操作。\n\n2.一旦进行`Action`的时候，会触发`reducer`处理函数。这个函数做具体的`state`操作。然后返回一个新的`state`\n\n3.通过`store.subscribe`监听`state`的变化，因为一旦state变化会自动触发`store.subscribe`\n## 操作步骤\n\n1.写Action\n```js\n//定义action类型\nconst ADD = 'ADD';\nconst SUBTRACTION = 'SUBTRACTION';\n\n//定义action生成函数\nfunction add_todo(text){\n\treturn {\n\t\ttype:ADD,\n\t\ttext:text\n\t}\n}\n\nfunction subtraction_todo(text){\n\treturn {\n\t\ttype:SUBTRACTION,\n\t\ttext:text\n\t}\n}\n\nexport {add_todo,subtraction_todo}\n```\n\n2.写Reducer(纯函数)\n```js\n//设置默认值为0\nconst countReducer = (state = { count: 0 },action) =\u003e{\n\tswitch (action.type){\n\t\tcase 'ADD':\n\t\t\treturn {count:state.count + 1};\n\t\tcase 'SUBTRACTION':\n\t\t\treturn {count:state.count - 1};\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}\n\nexport {countReducer}\n```\n\n3.createStore绑定reducer返回一个顶层的store\n```js\nimport {createStore} from 'redux'\n\n//将reducer传入createStore\nconst store = createStore(countReducer)\n```\n\n4.触发subscribe？\n```js\nstore.subscribe(function(){\n\n})\n```\n\n## 具体实现\n### createStore的实现\n```js\nconst createStore = (reducer) =\u003e {\n  let state;\n  let listeners = [];\n\n  const getState = () =\u003e state;\n\n  const dispatch = (action) =\u003e {\n    state = reducer(state, action);\n    listeners.forEach(listener =\u003e listener());\n  };\n\n  const subscribe = (listener) =\u003e {\n    listeners.push(listener);\n    return () =\u003e {\n      listeners = listeners.filter(l =\u003e l !== listener);\n    }\n  };\n\n  dispatch({});\n\n  return { getState, dispatch, subscribe };\n};\n```\n## react+react-redux+redux\n\n使用react-redux来链接两者就方便快捷很多了。相当于粘合剂，将react跟redux无缝链接。\n\n我们只需要定义两个映射state与操作,react-redux会自定触发render\n```js\n//Redux state 到 component props的映射\nfunction mapStateToProps(state) {\n  return {\n    count: state.count\n  }\n}\n\n//Redux actions 到 component props的映射\nfunction mapDispatchToProps(dispatch) {\n  return {\n    add: () =\u003e dispatch(add_todo('增加+')),\n    reduce:() =\u003e dispatch(subtraction_todo('递减-'))\n  }\n}\n```\n\n然后用connect将两者链接起来\n```js\nconst App = connect(\n  mapStateToProps,\n  mapDispatchToProps\n)(UICouter)\n```\n\n最后在用Provider在顶层将我们的组件包裹,并传入store即可。\n```js\nReactDOM.render(\n  \u003cProvider store={store}\u003e\n    \u003cApp /\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('content')\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaoqize%2Freact-webpack-dig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhaoqize%2Freact-webpack-dig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaoqize%2Freact-webpack-dig/lists"}