{"id":13606158,"url":"https://github.com/nathanbuchar/react-hook-thunk-reducer","last_synced_at":"2025-04-09T15:06:00.615Z","repository":{"id":34291758,"uuid":"174748317","full_name":"nathanbuchar/react-hook-thunk-reducer","owner":"nathanbuchar","description":"📡 A React useReducer() hook whose dispatcher supports thunks à la redux-thunk.","archived":false,"fork":false,"pushed_at":"2022-06-03T17:29:40.000Z","size":139,"stargazers_count":107,"open_issues_count":5,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T15:05:56.689Z","etag":null,"topics":["hook","react","reducer","redux","thunk"],"latest_commit_sha":null,"homepage":"","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/nathanbuchar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-03-09T21:30:32.000Z","updated_at":"2024-10-17T14:13:55.000Z","dependencies_parsed_at":"2022-08-25T02:00:51.197Z","dependency_job_id":null,"html_url":"https://github.com/nathanbuchar/react-hook-thunk-reducer","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanbuchar%2Freact-hook-thunk-reducer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanbuchar%2Freact-hook-thunk-reducer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanbuchar%2Freact-hook-thunk-reducer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanbuchar%2Freact-hook-thunk-reducer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathanbuchar","download_url":"https://codeload.github.com/nathanbuchar/react-hook-thunk-reducer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055284,"owners_count":21040157,"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":["hook","react","reducer","redux","thunk"],"created_at":"2024-08-01T19:01:06.615Z","updated_at":"2025-04-09T15:06:00.591Z","avatar_url":"https://github.com/nathanbuchar.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-hook-thunk-reducer\n\n\u003e Akin to [redux-thunk](https://www.npmjs.com/package/redux-thunk), `useThunkReducer()` augments React's [`useReducer()`](https://reactjs.org/docs/hooks-reference.html#usereducer) hook so that the action dispatcher supports [thunks](https://en.wikipedia.org/wiki/Thunk). Now, you can write action creators that return a function rather than an action!\n\u003e\n\u003e Requires React v16.8 and above.\n\n[![Npm version](https://img.shields.io/npm/v/react-hook-thunk-reducer.svg)](https://npmjs.org/package/react-hook-thunk-reducer)\n[![Travis](https://img.shields.io/travis/nathanbuchar/react-hook-thunk-reducer/master.svg)](https://travis-ci.org/nathanbuchar/react-hook-thunk-reducer?branch=master)\n[![David](https://img.shields.io/david/nathanbuchar/react-hook-thunk-reducer.svg)](https://david-dm.org/nathanbuchar/react-hook-thunk-reducer)\n\n\u003cbr/\u003e\n\n## Install\n\n```bash\nnpm install react-hook-thunk-reducer\n```\n\nThen just import it and use it like you would `React.useReducer()`.\n\n```js\nimport { useThunkReducer } from 'react-hook-thunk-reducer';\n\nfunction Component({ initialState }) {\n  const [state, dispatch] = useThunkReducer(reducer, initialState);\n\n  // ...\n}\n```\n\n## Usage\n\nCreate your actions just like you would in Redux. Similar to [redux-thunk](https://www.npmjs.com/package/redux-thunk), if an action returns a function, it's treated as a [thunk](https://en.wikipedia.org/wiki/Thunk) and has access to the current state.\n\n```js\nfunction increment() {\n  return {\n    type: 'increment'\n  };\n}\n\nfunction incrementIfOdd() {\n  return (dispatch, getState) =\u003e {\n    const { count } = getState();\n\n    if (count % 2 !== 0) {\n      dispatch(increment());\n    }\n  };\n}\n```\n\nCreate your functional component and call the `useThunkReducer()` hook as if it were `React.useReducer()`;\n\n```js\nimport { useThunkReducer } from 'react-hook-thunk-reducer';\n\n// ...\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter({ initialState }) {\n  const [state, dispatch] = useThunkReducer(reducer, initialState);\n\n  // ...\n\n  return (\n    \u003c\u003e\n      Count: {state.count}\n      \u003cbutton onClick={onButtonPress}\u003e+\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nDispatch your actions using the augmented `dispatch` function.\n\n```js\nconst onButtonPress = () =\u003e {\n  dispatch(incrementIfOdd());\n};\n```\n\nThe value of the inner function will be returned when dispatching thunks.\n\n```js\nfunction incrementAndReturnCount() {\n  return (dispatch, getState) =\u003e {\n    dispatch(increment());\n\n    return getState().count;\n  };\n}\n\nconst newCount = dispatch(incrementAndReturnCount());\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanbuchar%2Freact-hook-thunk-reducer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanbuchar%2Freact-hook-thunk-reducer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanbuchar%2Freact-hook-thunk-reducer/lists"}