{"id":19710468,"url":"https://github.com/rootstrap/redux-tools","last_synced_at":"2025-04-29T17:31:16.185Z","repository":{"id":56571315,"uuid":"221736356","full_name":"rootstrap/redux-tools","owner":"rootstrap","description":"Redux tools to speed up development.","archived":false,"fork":false,"pushed_at":"2020-10-30T20:49:22.000Z","size":108,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-19T05:12:08.589Z","etag":null,"topics":["hacktoberfest","hook","middleware","react","redux"],"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/rootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-14T16:05:03.000Z","updated_at":"2022-03-29T16:22:26.000Z","dependencies_parsed_at":"2022-08-15T21:10:30.593Z","dependency_job_id":null,"html_url":"https://github.com/rootstrap/redux-tools","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/rootstrap%2Fredux-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootstrap%2Fredux-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootstrap%2Fredux-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootstrap%2Fredux-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rootstrap","download_url":"https://codeload.github.com/rootstrap/redux-tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251549192,"owners_count":21607367,"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":["hacktoberfest","hook","middleware","react","redux"],"created_at":"2024-11-11T22:07:27.204Z","updated_at":"2025-04-29T17:31:15.794Z","avatar_url":"https://github.com/rootstrap.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @rootstrap/redux-tools\nThis package has some basic functionality common to both react bases.\nIt includes a status reducer that lets you track the status of your async actions and a thunks-like middleware that will automatically dispatch success and failure actions.\n\n## Basic usage\n\n### ActionCreators\n\nThis package provides an action creator utility, that together with the provided middleware will make it very easy to create side effects for your actions.\nThis setup will automatically execute your side effect thunk and dispatch success or error actions when the thunk succeeds or fails, respectively.\n\n`createThunk` receives the action names prefix as the first argument and the async thunk as the second one.\n\nExample:\n```js\n// src/actions/userActions.js\nimport { createThunk } from '@rootstrap/redux-tools'\n\nexport const getProfile = createThunk(\n  'GET_PROFILE',\n  userService.getProfile,\n);\n```\n\nYou can then dispatch this `getProfile` action, and the middleware will automatically dispatch actions with types `GET_PROFILE_SUCCESS` or `GET_PROFILE_ERROR` for you.\n\nThe returned object, (`getProfile` in the example above) has 4 properties you can use in order to handle the different dispatched actions in your reducer:\n- request\n- success\n- error\n- reset\n\nFollowing the previous example:\n\n```js\n// src/reducers/userReducer.js\n\nimport { getProfile } from 'src/actions/userActions';\n\nconst actionHandlers = {\n  [getProfile.success]: (state, { payload }) =\u003e {\n    state.user = payload;\n  },\n};\n```\n\nIf you need to access the store, or dispatch extra actions from your thunk, you can use `dispatch` and `getState` as the last two parameters.\n\nExample:\n\nDispatching some custom analytics event that requires store data:\n```js\n// src/actions/userActions.js\nimport { createThunk } from '@rootstrap/redux-tools'\n\nexport const getProfile = createThunk(\n  'GET_PROFILE',\n  async (userId, dispatch, getState) =\u003e {\n    const { analytics: { analyticsToken } } = getState();\n    const profile = await userService.getProfile(profileId);\n    dispatch(analytics.logProfile(analyticsToken, profile));\n    return profile;\n  },\n);\n```\n\n### Status tracking\n\nTo access status information on a component the `useStatus` hook is provided.\nThe following status constants are exported:\n- LOADING\n- SUCCESS\n- ERROR\n\nHere is a simple example:\n\n```js\nimport { useStatus, useDispatch } from 'hooks';\nimport { getProfile } from 'src/actions/userActions';\nimport { SUCCESS, LOADING, ERROR } from '@rootstrap/redux-tools'\n\nconst MyComponent = () =\u003e {\n  const getProfileRequest = useDispatch(getProfile);\n  const { status, error } = useStatus(getProfile);\n\n  return \u003c\u003e\n    \u003cbutton onClick={getProfileRequest}\u003eShow profile!\u003c/button\u003e\n    {(status === LOADING) \u0026\u0026 \u003cLoading /\u003e}\n    {(status === SUCCESS) \u0026\u0026 \u003cProfileComponent /\u003e}\n    {(status === ERROR) \u0026\u0026 \u003cErrorComponent /\u003e}\n  \u003c/\u003e\n}\n```\n\nA `useLoading` hook is also available if you only care about loading status. It returns a boolean indicating whether the action is still loading or not.\n\nTo reset the status of an action you can dispatch the `reset` action returned by `createThunk`.\n\n\n## Installation guide\n\n### Step 1: install the package\n\n`npm i @rootstrap/redux-tools`\nor\n`yarn add @rootstrap/redux-tools`\n\n### Step 2: configure the reducer\n```js\n// src/reducers/index.js\nimport { combineReducers } from 'redux'\nimport { statusReducer } from '@rootstrap/redux-tools'\n\nconst rootReducer = combineReducers({\n  // ...your other reducers here\n  // you have to pass statusReducer under 'statusReducer' key,\n  statusReducer\n})\n```\n\n### Step 3: configure the middleware\n```js\nimport { createStore, applyMiddleware } from 'redux'\nimport { thunkMiddleware } from '@rootstrap/redux-tools'\n\nimport rootReducer from 'src/reducers/index'\n\nconst store = createStore(rootReducer, applyMiddleware(thunkMiddleware))\n```\n\n## License\n\n**@rootstrap/redux-tools** is available under the MIT license. See the LICENSE file for more info.\n\n## Credits\n\n**@rootstrap/redux-tools** is maintained by [Rootstrap](http://www.rootstrap.com) with the help of our [contributors](https://github.com/rootstrap/redux-tools/contributors).\n\n[\u003cimg src=\"https://s3-us-west-1.amazonaws.com/rootstrap.com/img/rs.png\" width=\"100\"/\u003e](http://www.rootstrap.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frootstrap%2Fredux-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frootstrap%2Fredux-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frootstrap%2Fredux-tools/lists"}