{"id":18026381,"url":"https://github.com/promotively/react-redux-data","last_synced_at":"2026-04-05T23:35:12.265Z","repository":{"id":57138265,"uuid":"141575875","full_name":"promotively/react-redux-data","owner":"promotively","description":"Universal react.js/redux.js library for data fetching","archived":false,"fork":false,"pushed_at":"2020-10-21T01:30:53.000Z","size":794,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T09:44:45.739Z","etag":null,"topics":["actions","async","axios","es6","fetch","higher-order-component","hoc","hooks","isomorphic","javascript","promises","react","react-redux","reactjs","redux","redux-thunk","server-side-rendering","ssr","typescript","universal"],"latest_commit_sha":null,"homepage":"https://www.promotively.com","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/promotively.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-07-19T12:24:28.000Z","updated_at":"2020-10-24T05:56:17.000Z","dependencies_parsed_at":"2022-08-25T10:01:24.464Z","dependency_job_id":null,"html_url":"https://github.com/promotively/react-redux-data","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/promotively%2Freact-redux-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/promotively%2Freact-redux-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/promotively%2Freact-redux-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/promotively%2Freact-redux-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/promotively","download_url":"https://codeload.github.com/promotively/react-redux-data/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247235170,"owners_count":20905902,"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":["actions","async","axios","es6","fetch","higher-order-component","hoc","hooks","isomorphic","javascript","promises","react","react-redux","reactjs","redux","redux-thunk","server-side-rendering","ssr","typescript","universal"],"created_at":"2024-10-30T08:06:29.973Z","updated_at":"2025-12-30T23:07:58.165Z","avatar_url":"https://github.com/promotively.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @promotively/react-redux-data\n\n[![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![NPM Version](https://badge.fury.io/js/%40promotively%2Freact-redux-data.svg)](https://badge.fury.io/js/%40promotively%2Freact-redux-data)\n[![Coverage Status](https://coveralls.io/repos/github/promotively/react-redux-data/badge.svg)](https://coveralls.io/github/promotively/react-redux-data)\n[![Build Status](https://codebuild.us-west-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiZGRPblJsbXA4WWVDY0gyU0VnM0JaVDVkaUFTeGpzYnNLUlFqRGRWd0J2MnBKOHA5cCtUY1plZHUvczkwNy96QUlsL3JUb1JiRnZmWVVzOTk1bG5wTE5nPSIsIml2UGFyYW1ldGVyU3BlYyI6Imw3VVN2QnhvTkN6UFZaNmYiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D\u0026branch=master)](https://aws.amazon.com/codebuild)\n[![GitHub Issues](https://img.shields.io/github/issues/promotively/react-redux-data.svg)](https://github.com/promotively/react-redux-data/issues)\n[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/promotively/react-redux-data.svg)](https://GitHub.com/promotively/react-redux-data/pull/)\n\nUniversal/isomorphic react.js/redux.js javascript/typescript library for data fetching.\n\n## Why?\n\n- You are already using redux.js in your app.\n- You want an easy way to handle data fetching.\n- You are building a new app and want to use redux.js to handle your data state.\n- You have a bunch of repetitive data related react.js/redux.js boilerplate you wish didn't exist.\n- You want a proper data abstraction layer but don't have the time to build one.\n- You want to be able to debug your data through redux dev tools.\n- You want to avoid an architecture that depends on some kind of global data fetching layer (ie: react-router-config).\n- You need a library that is compatible with server side rendering.\n- You need to interact with APIs that are not HTTP and/or JSON based.\n- You want to refresh your data periodically through timers or events.\n- You need access to your component props when fetching data for things like access tokens or configs.\n- You need to share your data with external applications and/or tools.\n\n## Installation\n\nRequires **React 16.8.3 or later and Redux 7.0.0 or later.**\n\nWith Yarn\n\n`yarn add @promotively/react-redux-data`\n\nWith NPM\n\n`npm install @promotively/react-redux-data`\n\n## Example\n\nAdvanced examples using higher order components and hooks rendered with nodejs and web browsers are available inside the `/example` folder.\n\nOnce you have executed `yarn build` go to the `dist/example` folder and from there you can run `node server.js` to see server side rendering from `localhost:3000` or open the `index.html` file to see client side rendering.\n\nAn example is also [available online](https://promotively-react-redux-data.s3-us-west-1.amazonaws.com/example/index.html).\n\n## Documentation\n\nThe source code is documented using JSDoc syntax and documentation is generated using [jsdoc](https://github.com/jsdoc/jsdoc).\n\nOnce you have executed `yarn docs` documentation is available inside the `dist/docs` folder.\n\nDocumentation for the most recent release is also [available online](https://promotively-react-redux-data.s3-us-west-1.amazonaws.com/docs/index.html).\n\n## Setup\n\nAdd `dataReducer` to your redux.js store and make sure that `redux-thunk` is also added to your store middleware.\n\n```javascript\n// store.js\n\nimport { applyMiddleware, combineReducers, createStore } from 'redux';\nimport { dataReducer } from '@promotively/react-redux-data';\nimport thunk from 'redux-thunk';\n\nconst store = createStore(combineReducers({ data: dataReducer }), applyMiddleware(...[thunk]));\n\nexport default store;\n```\n\n## Usage\n\nWrap your component using `withData` and specify an id for your data and a function that returns a promise.\n\n```javascript\n// containers/users.js\n\nimport { withData } from '@promotively/react-redux-data';\nimport axios from 'axios';\nimport Users from '../components/users';\n\nconst fetchUsers = props =\u003e axios.get('http://localhost:3000/api/v1/users').then(response =\u003e response.data);\n\nconst UsersContainer = withData({\n  id: 'users',\n  action: fetchUsers\n})(Users);\n\nexport default UsersContainer;\n```\n\n```javascript\n// components/users.js\n\nimport React from 'react';\n\nconst Users = props =\u003e (\n  \u003cul\u003e\n    {props.error ? \u003cspan\u003eError: {props.error}\u003c/span\u003e : null}\n    {props.loading ? \u003cspan\u003eLoading, Please Wait...\u003c/span\u003e : null}\n    {props.users ? props.users.map(user =\u003e \u003cli key={user.id}\u003e{user.name}\u003c/li\u003e) : null}\n  \u003c/ul\u003e\n);\n\nexport default Users;\n```\n\n```javascript\n// components/app.js\n\nimport React from 'react';\n\nconst App = props =\u003e \u003cUsersContainer /\u003e;\n\nexport default App;\n```\n\nIf you need to do server side rendering use `hydrateStore` with `\u003cDataProvider /\u003e` to pre-fetch data before your app is rendered.\n\n```javascript\n// server.js\n\nimport App from './components/app';\nimport UsersContainer from './containers/users';\nimport express from 'express';\nimport { hydrateStore } from '@promotively/react-redux-data';\nimport { Provider } from 'react-redux';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport store from './store';\n\nconst server = express();\nconst data = [];\nconst app = (\n  \u003cProvider store={store}\u003e\n    \u003cDataProvider context={data}\u003e\n      \u003cApp /\u003e\n    \u003c/DataProvider\u003e\n  \u003c/Provider\u003e\n);\n\nserver.get('/', async (req, res, next) =\u003e {\n  try {\n    await hydrateStore(app, store, data);\n    res.send(renderToString(app));\n  } catch (error) {\n    next(error);\n  }\n});\n\nserver.listen(3000);\n```\n\n## API\n\n### Redux Action Creators\n\n| Function       | Arguments         | Description                                              |\n| -------------- | ----------------- | -------------------------------------------------------- |\n| `completeData` | (id, query, data) | Insert data into the store directly (good for caching!). |\n| `loadingData`  | (id)              | Set the data loading state.                              |\n| `errorData`    | (id, error)       | Set the data error state.                                |\n| `destroyData`   | (id)              | Remove data from the store.                              |\n| `fetchData`    | (id, promise)     | Resolve a promise and add the result to the store.       |\n\n### React Container Component\n\n| Function       | Description                                                                                                         | Props                                                                                 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |\n| `DataProvider` | Container component primarily used with the hydrateStore function for pre-fetching data with server side rendering. | { completeData, data, error, errorData, fetchData, loading, loadingData, destroyData } |\n\n### React Higher Order Component\n\n| Function   | Arguments | Description                                 | Props                                                    |\n| ---------- | --------- | ------------------------------------------- | -------------------------------------------------------- |\n| `withData` | (options) | An object containing configuration options. | { id, action, data, destroy, error, fetchData, loading } |\n\n\n### React Hook\n\n| Function   | Arguments | Description                                 | Props                                                    |\n| ---------- | --------- | ------------------------------------------- | -------------------------------------------------------- |\n| `useData` | (id, options) | An object containing configuration options. | { id, action, data, destroy, error, fetchData, loading } |\n\n### Redux Reducers\n\n| Function      | Description                                                                                   |\n| ------------- | --------------------------------------------------------------------------------------------- |\n| `dataReducer` | A redux.js reducer function to handle the state mutations during the data fetching lifecycle. |\n\n### React Redux Selectors\n\n| Function                    | Arguments | Description                                                      |\n| --------------------------- | --------- | ---------------------------------------------------------------- |\n| `createDataSelector`        | (id)      | Create a reselect.js selector function to get the current data.  |\n| `createDataErrorSelector`   | (id)      | Create a reselect.js selector function to get the error state.   |\n| `createDataLoadingSelector` | (id)      | Create a reselect.js selector function to get the loading state. |\n\n### Utilities\n\n| Function       | Arguments          | Description                                                                                                   |\n| -------------- | ------------------ | ------------------------------------------------------------------------------------------------------------- |\n| `hydrateStore` | (app, store, data) | A function that is used with the \u003cDataProvider /\u003e component for pre-fetching data with server side rendering. |\n\n## Build\n\nAll build artifacts can be found inside the `dist/lib` and `dist/example` folders after running `yarn build`.\n\n## Linting\n\nThis library uses [@promotively/eslint-config](https://github.com/promotively/eslint-config) and [@promotively/eslint-config-react](https://github.com/promotively/eslint-config-react) for its ESLint configuration.\n\n`yarn lint`\n\n## Tests\n\nThis library has 100% unit test code coverage.\n\nCode coverage is available inside the `dist/coverage` folder after running `yarn test`.\n\nCode coverage for the most recent release is also [available online](https://promotively-react-redux-data.s3-us-west-1.amazonaws.com/tests/index.html).\n\n## Feedback\n\nFeedback is more than welcome via [GitHub](https://github.com/promotively), [Twitter](https://twitter.com/promotively) or our [Website](https://promotively.com).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpromotively%2Freact-redux-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpromotively%2Freact-redux-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpromotively%2Freact-redux-data/lists"}