{"id":13450854,"url":"https://github.com/flepretre/use-redux","last_synced_at":"2025-03-23T16:32:31.710Z","repository":{"id":57388311,"uuid":"155592042","full_name":"flepretre/use-redux","owner":"flepretre","description":null,"archived":true,"fork":false,"pushed_at":"2019-06-13T22:02:37.000Z","size":183,"stargazers_count":62,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-22T21:46:33.244Z","etag":null,"topics":["hooks","react","redux"],"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/flepretre.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}},"created_at":"2018-10-31T16:46:33.000Z","updated_at":"2023-09-07T01:31:48.000Z","dependencies_parsed_at":"2022-09-02T06:01:10.599Z","dependency_job_id":null,"html_url":"https://github.com/flepretre/use-redux","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flepretre%2Fuse-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flepretre%2Fuse-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flepretre%2Fuse-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flepretre%2Fuse-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flepretre","download_url":"https://codeload.github.com/flepretre/use-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221856482,"owners_count":16892449,"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","react","redux"],"created_at":"2024-07-31T07:00:39.372Z","updated_at":"2024-10-28T16:32:03.224Z","avatar_url":"https://github.com/flepretre.png","language":"JavaScript","funding_links":[],"categories":["Packages","JavaScript"],"sub_categories":[],"readme":"# DEPRECATED  \n\nHook to access redux\n\n:warning: [react-redux](https://react-redux.js.org/) now provide hooks support.\nI strongly recommend you to use the official [react-redux](https://react-redux.js.org/) implementation.\nIf you already use this package switching to [react-redux](https://react-redux.js.org/) should not be too difficult.\n\n## Migration to [react-redux](https://react-redux.js.org/)\n\n### Provider\nFirst thing to do is to replace the use-redux provider by the react-redux one. Just change the import, it the provider underneath.\n\n### useRedux\nThe `use-redux` function was remove from the final implementation of [react-redux](https://react-redux.js.org/) hooks' so I recommend to use `useSelector` and `useDispatch`.\n\n### useSelectors\nHooks are designed to be called multiple time in the same component. If you have more than one selector, just make one call with `useSelector` for each selector.\n\n### useActionCreators\nFor this one you have to use `useDispatch` that give you access to the `dispatch` function.\nTo understand the switch from bindActionCreators in connect to the dispatch function with hooks I recommend you to read [this comment from Dan Abramov](https://github.com/reduxjs/react-redux/issues/1252#issuecomment-488160930).\n\n## Getting started\n\n### Install\n\n```sh\nyarn add use-redux\n```\n\n### useRedux\nYou can get the redux state and the dispatch function with `useRedux` custom hooks.\n\n```jsx\nimport { useEffect } from 'react';\nimport { useRedux } from 'use-redux';\n\nexport const Clock = props =\u003e {\n  const [ state, dispatch ] = useRedux();\n  \n  useEffect(() =\u003e {\n    const timeout = setTimeout(\n      () =\u003e dispatch({ type: 'SET', count: state.count + 1 }),\n      1000,\n    );\n    \n    return () =\u003e clearTimeout(timeout);\n  }, []);\n\n  return state.count;\n};\n```\n\nThis way you can read the redux state in the `state` variable, and dispatch redux action with the `dispatch` function.\n\nIf you don't have a Provider from `react-redux` in your app see the [Provider section](#provider-react-redux) below.\n\n### with selectors and action creators\n\nBecause your component should not access to the whole state and and the dispatch function, you can pass selectors and action creators to useRedux like that:\n\n```jsx\nimport { useRedux } from 'use-redux';\n\n// Some selectors\nconst v1Selector = state =\u003e state.value1;\nconst v2Selector = state =\u003e state.value2;\n\n// Some action creators\nconst a1Creator = () =\u003e ({ type: 'FOO' });\nconst a2Creator = payload =\u003e ({ type: 'BAR', payload });\n\nexport const MyComponent = props =\u003e {\n  const [ v1, v2, a1, a2 ] = useRedux([v1Selector, v2Selector], [a1Creator, a2Creator]);\n  // v1 and v2 contains values selected in the redux state\n  // a1 et a2 are function that dispatch redux actions define in creators\n  \n  // render stuff\n};\n```\n\nSee documentation for redux [action creators](https://redux.js.org/glossary#action-creator) and [selectors](https://react-redux.js.org/using-react-redux/connect-mapstate#use-selector-functions-to-extract-and-transform-data).\n\n### useSelectors\n\nIf you don't need to fire actions, you can just use useSelectors hook:\n\n```jsx\nimport { useSelectors } from 'use-redux';\n\n// Some selectors\nconst v1Selector = state =\u003e state.value1;\nconst v2Selector = state =\u003e state.value2;\n\nexport const MyComponent = props =\u003e {\n  const [ v1, v2 ] = useSelectors(v1Selector, v2Selector);\n  // v1 and v2 contains values selected in the redux state\n  \n  return \u003cdiv\u003ev1: {v1} and v2: {v2}\u003c/div\u003e;\n};\n```\n\n### useActionCreators\n\nIf you don't need to read the state, you can just use useActionCreators hook:\n```jsx\nimport { useEffect } from 'react';\nimport { useActionCreators } from 'use-redux';\n\n// Some action creators\nconst setCreator = (payload) =\u003e ({ type: 'SET', payload });\nconst resetCreator = () =\u003e ({ type: 'RESET' });\n\n// Hook that set things on mount and clear them when unmount\nexport const MyCustomHook = (payload) =\u003e {\n  const [ set, reset ] = useActionCreators(setCreator, resetCreator);\n  \n  useEffect(() =\u003e {\n    set(payload);\n    \n    return () =\u003e reset();\n  }, []);\n};\n```\n\n## Dependencies\n### react-redux\nIf you're already use [redux](https://redux.js.org/) in your app, you probably use [react-redux](https://react-redux.js.org/) to bind redux to your react app.\n\n`use-redux` uses the context of `react-redux` to access the same redux store. \n\nIf you don't have `react-redux` you need to install it.\n\n```sh\nyarn add react-redux\n```\n\n:warning: Due to the new react context API, use-redux is only compatible with `react-redux` v6.0.0 or higher.\n\n### Provider (react-redux)\n\n`use-redux` exports the Provider from `react-redux`\n\nFirst, surround your top component with the `Provider` and provide a [redux](https://redux.js.org/) store through the `store` prop.\n\n```jsx\nimport { createStore } from 'redux';\n// The provider has a slightly different name so you can easily know where it came from\nimport { ReduxProvider } from 'use-redux';\n// Or directly from react-redux \n// import { Provider } from 'react-redux';\n\n// redux store\nconst store = createStore(reducers)\n\nReactDOM.render(\n  \u003cReduxProvider store={store}\u003e\n    \u003cApp /\u003e\n  \u003c/ReduxProvider\u003e,\n  document.getElementById('root')\n);\n```\n\nSee https://react-redux.js.org/api/provider for more\n\n### connect (react-redux)\n\n`use-redux` exports the connect function from `react-redux`\n\nSee https://react-redux.js.org/api/connect for\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflepretre%2Fuse-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflepretre%2Fuse-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflepretre%2Fuse-redux/lists"}