https://github.com/rvlewerissa/fetch-hoc-redux
Higher Order Component for fetching with Redux integration.
https://github.com/rvlewerissa/fetch-hoc-redux
fetch fetching higher-order-component hoc redux
Last synced: about 1 month ago
JSON representation
Higher Order Component for fetching with Redux integration.
- Host: GitHub
- URL: https://github.com/rvlewerissa/fetch-hoc-redux
- Owner: rvlewerissa
- Created: 2017-08-15T10:10:26.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-17T19:45:21.000Z (over 7 years ago)
- Last Synced: 2025-03-24T15:42:04.256Z (about 2 months ago)
- Topics: fetch, fetching, higher-order-component, hoc, redux
- Language: JavaScript
- Size: 163 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/rvlewerissa/fetch-hoc-redux)
[](https://gemnasium.com/rvlewerissa/fetch-hoc-redux)
# Fetch HOC Redux
Simple Fetching Higher Order Component with Redux integration. It will caches your fetch automatically.
[](https://nodei.co/npm/fetch-hoc-redux/)
* [Installation](https://github.com/rvlewerissa/fetch-hoc-redux#installation)
* [Setting Up](https://github.com/rvlewerissa/fetch-hoc-redux#setting-up)
* [Additional Features](https://github.com/rvlewerissa/fetch-hoc-redux#additional-features)
## Installation
**NPM:**
```
npm install fetch-hoc-redux --save
```
**Yarn:**
```
yarn add fetch-hoc-redux
```
## Setting Up
### Setup Reducer
Import `fetchHOCReducer` to your Redux setup:
```es6
import {createStore} from "redux";
import {fetchRootReducer, fetchHOCReducer} from "fetch-hoc-redux";
// specify as root reducer
let rootReducer = createStore(fetchRootReducer);
// or specify in combineReducers
let rootReducer = combineReducers({
__FETCHER__: fetchHOCReducer,
});
```
### Setup Component
Wrap your component:
```es6
import fetchHOC from "fetch-hoc-redux";
import YourReactComponent from "./myComponent";
let URL = 'https://newsapi.org/v1/articles';
let WrapperComponent = fetchHOC(URL)(YourReactComponent);
```
## Additional Features
### Variable To Endpoint Mapping
You 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.
```es6
import fetchHOC from "fetch-hoc-redux";
import YourReactComponent from "./myComponent";
import {API_KEY} from "./APIKey";
let URL =
"https://newsapi.org/v1/articles?source=bar&apiKey=foo";
let mapFromState = (state) => {
return {
foo: API_KEY,
};
};
let mapFromProps = (props) => {
return {
bar: props.source,
}
}
let WrapperComponent = fetchHOC(URL, mapFromState, mapFromProps)(YourReactComponent);
```
### Multiple Endpoints
For multiple endpoints, currently you can combine multiple fetch HOC Component:
```es6
import YourReactComponent from "./myComponent";
import {URL_1, URL_2} from "./URLs";
let WrapperComponent = fetchHOC(URL_1)(YourReactComponent);
export default fetchHOC(URL_2)(WrapperComponent)
```
Resulting data will be an array of data.
## Passed Props
| Prop | Type | Description |
| ------- | --------------- | -------------------------------------------------------------------------- |
| data | Array or Object or undefined | Fetched data results, will be in array form if multiple endpoints are used |
| isLoading | boolean |
| isSuccess | boolean |
| refetch | Function | trigger refetch
> Wrapping multiple _Fetch HOC_ will make `isLoading`, `isSuccess`, and `refetch` prop of latter component overwrites former _Fetch HOC_.