{"id":13450598,"url":"https://github.com/brn/rrh","last_synced_at":"2026-02-16T15:01:19.663Z","repository":{"id":142030864,"uuid":"176658923","full_name":"brn/rrh","owner":"brn","description":"Super Simple React Hooks for react-redux.","archived":false,"fork":false,"pushed_at":"2019-03-20T05:45:08.000Z","size":88,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T13:05:39.320Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/brn.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}},"created_at":"2019-03-20T05:14:56.000Z","updated_at":"2024-06-15T22:01:42.000Z","dependencies_parsed_at":"2024-01-07T11:11:10.882Z","dependency_job_id":"532b188f-0535-434b-ac72-851649e88ab9","html_url":"https://github.com/brn/rrh","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brn/rrh","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brn%2Frrh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brn%2Frrh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brn%2Frrh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brn%2Frrh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brn","download_url":"https://codeload.github.com/brn/rrh/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brn%2Frrh/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29510518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-07-31T07:00:36.546Z","updated_at":"2026-02-16T15:01:19.648Z","avatar_url":"https://github.com/brn.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# RRH\n\n## What's this?\n\nSimple [React Hooks](https://reactjs.org/docs/hooks-overview.html) of [React Redux](https://github.com/reduxjs/react-redux)\n\n## Dependencies\n\nYou must install some dependent packages before use RHH.\n\n- [react](https://github.com/facebook/react)\n- [redux](https://github.com/reduxjs/redux)\n\n\n## Install\n\n__npm__\n\n```shell\nnpm install rrh --save\n```\n\n__yarn__\n\n```shell\nyarn add rrh\n```\n\n## How to use\n\n__Provider__\n\n```javascript\nimport React from 'react';\nimport { useProvider } from 'rrh';\nimport reducer from './reducer';\nimport middleware from './middleware'\nimport Child from './child';\n\nconst Component = () =\u003e {\n  const Provider = useProvider(() =\u003e ({\n    reducer,\n    preloadedState: {count: 1},\n    storeEnhancer: applyMiddleware(middleware)\n  }));\n\n  return \u003cProvider\u003e\u003cChild\u003e\u003c/Provider\u003e\n}\n```\n\n\n__connect__\n\n```javascript\nimport React from 'react';\nimport { useSelector } from 'rrh';\n\nconst Child = (props) =\u003e {\n  const selected = useSelector(\n    props,\n    (dispatch, props) =\u003e ({\n      increment: () =\u003e dispatch({type: 'INCREMENT', payload: 1}),\n      decrement: () =\u003e dispatch({type: 'DECREMENT', payload: -1}),\n    }),\n    (state, props) =\u003e ({count: state.count}),\n    state =\u003e [state.count]\n  );\n\n  return (\n    \u003cdiv\u003e\n      {selected.count}\n      \u003cbutton onClick={selected.increment}\u003eINC\u003c/button\u003e\n      \u003cbutton onClick={selected.decrement}\u003eDEC\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## API\n\n### useProvider\n\n__types__\n\n```typescript\n\u003cState, Ext = {}, StateExt = {}\u003e(init: () =\u003e {\n  reducer: Reducer\u003cState, AnyAction\u003e;\n  preloadedState?: DeepPartial\u003cState\u003e;\n  storeEnhancer?: StoreEnhancer\u003cExt, StateExt\u003e;\n}) =\u003e Provider\n```\n\n__overview__\n\nReturn redux store Provider Component that has store inside.  \nNo props needed.\nAll arguments are same as redux's `createStore`.\n\nStore and provider is initialized once per process when useProvider called.\nSo if you want to create new store and Provider, you need to create new hooks instance. See [Multiple store](#muliple-store).\n\n\n### useSelector\n\n__types__\n\n```typescript\n\u003cHandlers, ExtractedState, Props, State\u003e(\n  props: React.PropsWithChildren\u003cProps\u003e,\n  mapDispatchToProps: (dispatch: Dispatch, ownProps: Props) =\u003e Handlers,\n  mapStateToProps: (state: State, ownProps: Props) =\u003e ExtractedState,\n  deps?: any[] | ((state: State) =\u003e any[])\n) =\u003e Handlers \u0026 ExtractedState\n```\n__overview__\n\nuseSelector behave like redux's `connect(config)(Component)`, but like [https://github.com/reduxjs/reselect](Redux-reselect),  \nwe will check dependencies are updated or not, by using `useMemo`.\nSo if `deps` is updated, `mapDispatchToProps` and `mapStateToProps` will be called.\n\nIf you want to specify deps from state, do like below.\n\n```javascript\nuseSelector(props, () =\u003e {...}, () =\u003e {...}, (state) =\u003e [state.valueA, state.valueB, ...])\n```\n\nor if you want to use array deps just like other hooks.\n\n```javascript\nuseSelector(props, () =\u003e {...}, () =\u003e {...}, [props.valueA, props.valueB])\n```\n\n### useDispatchToProps\n\n__types__\n\n```typescript\n\u003cProps, Handlers\u003e(\n  props: Props,\n  mapDispatchToProps: (dispatch: Dispatch, ownProps: Props) =\u003e Handlers,\n  deps?: any[]\n) =\u003e Handlers\n```\n\n__overview__\n\n`useDispatchToProps` can partialy call mapDispatchToProps to the store state.\n\n\n### useStateToProps\n\n__types__\n\n```\n\u003cProps, State, ExtractedState\u003e(\n  props: Props,\n  mapStateToProps: (state: State, ownProps: Props) =\u003e ExtractedState,\n  deps?: any[] | ((state: State) =\u003e any[])\n) =\u003e ExtractedState\n```\n\n__overview__\n\n`useStateToProps` can partialy call mapStateToProps to the store state.\n\nIf you want to specify deps from state, do like below.\n\n```javascript\nuseStateToProps(props, () =\u003e {...}, (state) =\u003e [state.valueA, state.valueB, ...])\n```\n\nor if you want to use array deps just like other hooks.\n\n```javascript\nuseStateToProps(props, () =\u003e {...}, [props.valueA, props.valueB])\n```\n\n### useDispatch\n\n__types__\n\n```typescript\n() =\u003e Dispatch\n```\n\n__overview__\n\n`useDispatch` is simply return `store.dispatch`.\n\n```javascript\nconst dispatch = useDispatch()\ndispatch({type: 'ACTION', ...});\n```\n\n### useStore\n\n__types__\n\n```typescript\n() =\u003e Store\n```\n\n__overview__\n\n`useStore` is simply return `store`.\n\n```javascript\nconst store = useStore()\nconsole.log(store.getState());\n```\n\n\n## Muliple store\n\nIf you want to create muliple store, you need to create new hooks instance by using `generateReduxHooks`.\n\n### generateReduxHooks\n\n__types__\n\n```typescript\nenum RRHStoreInitilizationTiming {\n  EACH_MOUNT,\n  ONCE_PER_FACTORY\n}\n\ninterface Options {\n  initializationTiming: RRHStoreInitilizationTiming\n}\n\n(options: Options) =\u003e Hooks\n```\n\n__overview__\n\n`generateReduxHooks` is create new hooks instance.  \n\nAll hooks returned from `generateReduxHooks` is not initialized, so if you call `useProvider`,  \nnew `store` and `Provider` will be created.\nBetween hooks instances, store is __not__ shared.\n\n\n__initialization timing__\n\n`generateReduxHooks` accepts `RRHStoreInitilizationTiming`, this options behave like below.\n\n|type|description|\n----|----\n|EACH_MOUNT|Store and Provider will be initialized each componentDidMount|\n|ONCE_PER_FACTORY|Store and Provider will be initialized only first `useProvider` call.|\n\n\n__default hooks__\n\nAll default hooks that exported from 'rrh' package are initialized by `RRHStoreInitilizationTiming.ONCE_PER_FACTORY`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrn%2Frrh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrn%2Frrh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrn%2Frrh/lists"}