{"id":24370466,"url":"https://github.com/rvlewerissa/fetch-hoc-redux","last_synced_at":"2025-04-10T17:53:40.593Z","repository":{"id":57234588,"uuid":"100365397","full_name":"rvlewerissa/fetch-hoc-redux","owner":"rvlewerissa","description":"Higher Order Component for fetching with Redux integration.","archived":false,"fork":false,"pushed_at":"2017-08-17T19:45:21.000Z","size":167,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T15:42:04.256Z","etag":null,"topics":["fetch","fetching","higher-order-component","hoc","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rvlewerissa.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}},"created_at":"2017-08-15T10:10:26.000Z","updated_at":"2023-03-10T09:07:41.000Z","dependencies_parsed_at":"2022-09-15T04:41:13.528Z","dependency_job_id":null,"html_url":"https://github.com/rvlewerissa/fetch-hoc-redux","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvlewerissa%2Ffetch-hoc-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvlewerissa%2Ffetch-hoc-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvlewerissa%2Ffetch-hoc-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rvlewerissa%2Ffetch-hoc-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rvlewerissa","download_url":"https://codeload.github.com/rvlewerissa/fetch-hoc-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247847608,"owners_count":21006099,"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":["fetch","fetching","higher-order-component","hoc","redux"],"created_at":"2025-01-19T04:35:11.809Z","updated_at":"2025-04-10T17:53:40.571Z","avatar_url":"https://github.com/rvlewerissa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/rvlewerissa/fetch-hoc-redux.svg?branch=master)](https://travis-ci.org/rvlewerissa/fetch-hoc-redux)\n[![Dependency Status](https://gemnasium.com/rvlewerissa/fetch-hoc-redux.svg)](https://gemnasium.com/rvlewerissa/fetch-hoc-redux)\n\n# Fetch HOC Redux\nSimple Fetching Higher Order Component with Redux integration. It will caches your fetch automatically.\n\n[![NPM](https://nodei.co/npm/fetch-hoc-redux.png)](https://nodei.co/npm/fetch-hoc-redux/)\n\n* [Installation](https://github.com/rvlewerissa/fetch-hoc-redux#installation)\n* [Setting Up](https://github.com/rvlewerissa/fetch-hoc-redux#setting-up)\n* [Additional Features](https://github.com/rvlewerissa/fetch-hoc-redux#additional-features)\n\n## Installation\n**NPM:**\n```\nnpm install fetch-hoc-redux --save\n```\n**Yarn:**\n```\nyarn add fetch-hoc-redux\n```\n## Setting Up\n\n### Setup Reducer\nImport `fetchHOCReducer` to your Redux setup:\n```es6\nimport {createStore} from \"redux\";\nimport {fetchRootReducer, fetchHOCReducer} from \"fetch-hoc-redux\";\n\n// specify as root reducer\nlet rootReducer = createStore(fetchRootReducer);\n\n// or specify in combineReducers\nlet rootReducer = combineReducers({\n  __FETCHER__: fetchHOCReducer,\n  });\n```\n\n### Setup Component\nWrap your component:\n```es6\nimport fetchHOC from \"fetch-hoc-redux\";\nimport YourReactComponent from \"./myComponent\";\n\nlet URL = 'https://newsapi.org/v1/articles';\n\nlet WrapperComponent = fetchHOC(URL)(YourReactComponent);\n\n```\n\n## Additional Features\n### Variable To Endpoint Mapping\nYou can also specify one to one variable mapping to set variable on the URL. It will receives state from your redux state or from parent props.\n\n```es6\nimport fetchHOC from \"fetch-hoc-redux\";\nimport YourReactComponent from \"./myComponent\";\nimport {API_KEY} from \"./APIKey\";\n\nlet URL =\n  \"https://newsapi.org/v1/articles?source=bar\u0026apiKey=foo\";\n\nlet mapFromState = (state) =\u003e {\n  return {\n    foo: API_KEY,\n  };\n};\n\nlet mapFromProps = (props) =\u003e {\n  return {\n    bar: props.source,\n  }\n}\n\nlet WrapperComponent = fetchHOC(URL, mapFromState, mapFromProps)(YourReactComponent);\n```\n\n### Multiple Endpoints\nFor multiple endpoints, currently you can combine multiple fetch HOC Component:\n```es6\nimport YourReactComponent from \"./myComponent\";\nimport {URL_1, URL_2} from \"./URLs\";\n\nlet WrapperComponent = fetchHOC(URL_1)(YourReactComponent);\n\nexport default fetchHOC(URL_2)(WrapperComponent)\n```\nResulting data will be an array of data.\n\n\n## Passed Props\n| Prop    | Type            | Description                                                                |\n| ------- | --------------- | -------------------------------------------------------------------------- |\n| data    | Array\u003cObject\u003e or Object or undefined | Fetched data results, will be in array form if multiple endpoints are used |\n| isLoading | boolean |\n| isSuccess | boolean |\n| refetch   | Function | trigger refetch\n\n\u003e Wrapping multiple _Fetch HOC_ will make `isLoading`, `isSuccess`, and `refetch` prop of latter component overwrites former _Fetch HOC_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvlewerissa%2Ffetch-hoc-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frvlewerissa%2Ffetch-hoc-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frvlewerissa%2Ffetch-hoc-redux/lists"}