reduxFetch() · React Redux Fetch

The reduxFetch() function is one of the two ways to connect react-redux-fetch to your component. You can read more about the other way (ReduxFetch component) here.

The technique used for reduxFetch() is a commonly used technique for code sharing in React, called "Higher order Component".

Importing

var reduxFetch = require('react-redux-fetch'); // ES5

import reduxFetch from 'react-redux-fetch'; // ES6

Arguments you can pass to reduxFetch

reduxFetch(fetchConfig, mapStateToProps?, mapDispatchToProps?)(YourComponent);

fetchConfig: Array|(props, context) => Array [required]

Read more in the FetchConfig documentation for all possible config properties. When used as a function, the function receives the props and the context, which can then be used in your configuration to dynamically build your urls. Note: Using just the Array is preferred, because this allows react-redux-fetch to cache the generated dispatch functions.

mapStateToProps: See react-redux documentation
mapDispatchToProps: See react-redux documentation

Usage

import React from 'react';
import reduxFetch from 'react-redux-fetch';

class PokemonList extends React.Component {
  // ...
}

// reduxFetch(): Declarative way to define the resource needed for this component
export default reduxFetch([
  {
    resource: 'allPokemon',
    method: 'get', // You can omit this, this is the default
    request: {
      url: 'http://pokeapi.co/api/v2/pokemon/',
    },
  },
])(PokemonList);