{"id":20355595,"url":"https://github.com/geekeast/redux-state-managment","last_synced_at":"2025-10-29T08:47:03.468Z","repository":{"id":41717605,"uuid":"239886739","full_name":"GeekEast/redux-state-managment","owner":"GeekEast","description":"Tips on state management of Redux on React. Share some Performance Optimization Techniques as well.","archived":false,"fork":false,"pushed_at":"2023-01-05T07:03:11.000Z","size":1016,"stargazers_count":4,"open_issues_count":24,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T23:34:35.137Z","etag":null,"topics":["hooks","performance","redux","redux-thunk","reselect"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/redux-state-management-3gpnb","language":"TypeScript","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/GeekEast.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-02-11T23:33:23.000Z","updated_at":"2020-05-22T04:20:11.000Z","dependencies_parsed_at":"2023-02-03T17:15:55.212Z","dependency_job_id":null,"html_url":"https://github.com/GeekEast/redux-state-managment","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/GeekEast%2Fredux-state-managment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeekEast%2Fredux-state-managment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeekEast%2Fredux-state-managment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeekEast%2Fredux-state-managment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GeekEast","download_url":"https://codeload.github.com/GeekEast/redux-state-managment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248509191,"owners_count":21115959,"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":["hooks","performance","redux","redux-thunk","reselect"],"created_at":"2024-11-14T23:13:25.081Z","updated_at":"2025-10-29T08:46:58.413Z","avatar_url":"https://github.com/GeekEast.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Basics\n### Important Functions in Redux\n- `compose`\n```javascript\nimport { compose } from 'redux';\n\nconst makeLouder = string =\u003e string.toUpperCase();\n// @ts-ignore\nconst repeatThreeTimes = string =\u003e string.repeat(3);\nconst embolden = string =\u003e string.bold();\n\nconst makeLouderAndRepeatThreeTimesAndEmbolden = compose(makeLouder, repeatThreeTimes, embolden);\n\nconst tag = document.createElement(\"span\");\nconst textNode = document.createTextNode(makeLouderAndRepeatThreeTimesAndEmbolden('b'));\ntag.append(textNode);\ndocument.getElementById(\"app\")!.appendChild(tag);\n```\n- `store.subscribe`\n```javascript\nconst store = createStore(rootReducer);\nconst unsubscribe = store.subscribe(() =\u003e {\n  console.log(store.getState().a);\n});\nstore.dispatch({ type: \"ADD_ONE\", payload: 1 });\nstore.dispatch({ type: \"ADD_ONE\", payload: 1 });\nstore.dispatch({ type: \"ADD_ONE\", payload: 1 });\nstore.dispatch({ type: \"ADD_ONE\", payload: 1 });\nstore.dispatch({ type: \"ADD_ONE\", payload: 1 });\nunsubscribe();\n```\n\n### Normalized state\n- `normalizr`: \n  - `id` is a **must**; \n  - `only` need to define **relationships** in schema.\n- **Update**: you probably don't need `ids`.\n```javascript\nimport { normalize, schema } from \"normalizr\";\nimport defaultState from \"./default-state.json\";\n\n// schema\nconst user = new schema.Entity(\"users\");\nconst card = new schema.Entity(\"cards\", {\n  assignedTo: user\n});\nconst list = new schema.Entity(\"lists\", {\n  cards: [card]\n});\n\n// normalize\nconst normalizedLists = normalize(defaultState.lists, [list]);\n\n\n// export normalized data\nexport const lists = {\n  entities: normalizedLists.entities.lists,\n  ids: normalizedLists.result\n};\n\nexport const cards = {\n  entities: normalizedLists.entities.cards,\n  ids: Object.keys(normalizedLists.entities.cards)\n};\n\nexport const users = {\n  entities: normalizedLists.entities.users,\n  ids: Object.keys(normalizedLists.entities.users)\n}\n```\n\n### Dev Tool\n- Don't use `const composeEnhancers =\n  (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ \u0026\u0026\n    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: process.env.NODE_ENV === \"development\", traceLimit: 25 })) ||\n  compose;`\n- use `yarn add redux-devtools-extension`\n```javascript\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from 'redux-devtools-extension';\n \nconst composeEnhancers = composeWithDevTools({\n  // Specify here name, actionsBlacklist, actionsCreators and other options\n});\nconst store = createStore(reducer, composeEnhancers(\n  applyMiddleware(...middleware),\n  // other store enhancers if any\n));\n```\n\n## `Object.is` vs `shallowCompare`\n- **single** property -\u003e `Object.is`\n- **multiple** properties -\u003e `shallowCompare` \n\n## Reference\n- [Github/reselect](https://github.com/reduxjs/reselect#reselect)\n- [Redux Hooks](https://react-redux.js.org/next/api/hooks#hooks)\n- [React组件设计实践总结](https://bobi.ink/2019/05/10/react-component-design-01/)\n- [React Patterns](https://reactpatterns.cn/)\n- [React Bits](https://vasanthk.gitbooks.io/react-bits/)\n- [Mind Hacks](http://mindhacks.cn/)\n- [有赞技术](https://tech.youzan.com/tag/team-introduction/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekeast%2Fredux-state-managment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeekeast%2Fredux-state-managment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekeast%2Fredux-state-managment/lists"}