Higher Order Component for fetching with Redux integration.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
source
.DS_Store
.babelrc
.eslintrc
.flowconfig
.gitignore
.npmignore
.travis.yml
README.md
package.json
yarn.lock

README.md

Build Status Dependency Status

Fetch HOC Redux

Simple Fetching Higher Order Component with Redux integration. It will caches your fetch automatically.

NPM

Installation

NPM:

npm install fetch-hoc-redux --save

Yarn:

yarn add fetch-hoc-redux

Setting Up

Setup Reducer

Import fetchHOCReducer to your Redux setup:

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:

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.

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:

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.