{"id":21057598,"url":"https://github.com/dioklecijan/react-use-model","last_synced_at":"2025-03-14T00:26:29.702Z","repository":{"id":125654556,"uuid":"173171765","full_name":"dioklecijan/react-use-model","owner":"dioklecijan","description":"How to use custom hooks in React to expose state, actions and state getters.","archived":false,"fork":false,"pushed_at":"2019-02-28T19:12:58.000Z","size":43,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-20T19:34:13.382Z","etag":null,"topics":["hooks-api-react","react","reducer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/dioklecijan.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-28T19:08:28.000Z","updated_at":"2020-09-04T08:34:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"bd92be55-a0e2-44b6-892a-e37cbc2e9d7e","html_url":"https://github.com/dioklecijan/react-use-model","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/dioklecijan%2Freact-use-model","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dioklecijan%2Freact-use-model/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dioklecijan%2Freact-use-model/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dioklecijan%2Freact-use-model/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dioklecijan","download_url":"https://codeload.github.com/dioklecijan/react-use-model/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243502053,"owners_count":20300989,"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-api-react","react","reducer"],"created_at":"2024-11-19T17:01:59.760Z","updated_at":"2025-03-14T00:26:29.671Z","avatar_url":"https://github.com/dioklecijan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\nHow to use custom hook to expose state, actions and state getters.\n\n```js\nconst useModel = () =\u003e {\n  const [state, dispatch] = useReducer(reducer, initState, initFunc);\n\n  return {\n    state,\n    actions: useMemo(() =\u003e mapDispatchToActions(dispatch), [dispatch]),\n    getters: useMemo(() =\u003e mapStateToGetters(state), [state]),\n  };\n};\n\nconst App = () =\u003e {\n  const model1 = useModel(); // instance one with state, actions and getters.)\n  const model2 = useModel(); // instance two \n  \n  const renderModel = (model, modelName) =\u003e {\n    const { state, actions, getters } = modelName;\n    return (\n      \u003cdiv\u003e\n        \u003cdiv onClick={() =\u003e actions.inc()}\u003e\n          \u003cu\u003eClick to inc counter in model {num}\u003c/u\u003e\n        \u003c/div\u003e\n        \u003chr /\u003e\n        \u003cdiv\u003e{JSON.stringify(state)}\u003c/div\u003e\n        \u003chr /\u003e\n        \u003cdiv\u003eisCounterEven: {getters.isCounterEven()}\u003c/div\u003e\n        \u003chr /\u003e\n        \u003cdiv onClick={() =\u003e actions.incLazy()}\u003e\n          inc lazy {JSON.stringify(state)}\n        \u003c/div\u003e\n        \u003chr /\u003e\n        \u003cdiv\u003eisLazyEven: {getters.isLazyEven()}\u003c/div\u003e\n        \u003chr /\u003e\n        \u003cdiv\u003eisCounterSmall: {getters.isCounterSmall}\u003c/div\u003e\n      \u003c/div\u003e\n    );\n  };\n  \n  ...\n}\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdioklecijan%2Freact-use-model","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdioklecijan%2Freact-use-model","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdioklecijan%2Freact-use-model/lists"}