React Redux Fetch · A declarative and customizable way to fetch data in React.

React Redux FetchA declarative and customizable way to fetch data in React.

Remove boilerplate

No more creating actions, action types, reducers, middleware and selectors for every API call. React-redux-fetch removes this boilerplate without losing flexibility.

Highly customizable

Almost every part of react-redux-fetch can be replaced with a custom implementation. Use the sensible defaults, or customize where needed.

Installation

To download react-redux-fetch, run:

npm install --save react-redux-fetch

yarn add react-redux-fetch

Setup

Connect the react-redux-fetch middleware to the Store using applyMiddleware:

  // configureStore.js

  import { middleware as fetchMiddleware } from 'react-redux-fetch';       
  import { applyMiddleware, createStore } from 'redux';
  
  const configureStore = (initialState, rootReducer) => {
    const middleware = [fetchMiddleware, otherMiddleware];
  
    const store = createStore(
      rootReducer,
      initialState,
      applyMiddleware(...middleware)
    );
  
    return store;
  };

  export default configureStore;

Mount react-redux-fetch reducer to the state at repository:

  // rootReducer.js

  import { combineReducers } from 'redux';
  import { reducer as fetchReducer } from 'react-redux-fetch';

  const rootReducer = combineReducers({
    // ... other reducers
    repository: fetchReducer
  });

  export default rootReducer;

Usage: Higher order Component


import React from 'react';
import PropTypes from 'prop-types'
import reduxFetch from 'react-redux-fetch';

class PokemonList extends React.Component {
    static propTypes = {
        dispatchAllPokemonGet: PropTypes.func.isRequired,
        allPokemonFetch: PropTypes.object
    };

    componentDidMount() {
        this.props.dispatchAllPokemonGet();
    }

    render() {
        const {allPokemonFetch} = this.props;

        if (allPokemonFetch.rejected) {
            return <div>Oops... Could not fetch Pokémon!</div>;
        }

        if (allPokemonFetch.fulfilled) {
            return (
              <ul>
                {allPokemonFetch.value.results.map(pokemon => (
                    <li key={pokemon.name}>{pokemon.name}</li>
                ))}
              </ul>
            );  
        }

        return <div>Loading...</div>;
    }
}

// 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);

Usage: Render props


import React from 'react';
import { ReduxFetch } from 'react-redux-fetch';

const fetchConfig = [{
  resource: 'allPokemon',
  method: 'get', // You can omit this, this is the default 
  request: {
      url: 'http://pokeapi.co/api/v2/pokemon/'
  }
}];

const PokemonList = () => (
  <ReduxFetch config={fetchConfig} fetchOnMount>
    {({ allPokemonFetch }) => {
      if (allPokemonFetch.rejected) {
        return <div>Oops... Could not fetch Pokémon!</div>;
      }

      if (allPokemonFetch.fulfilled) {
        return (
          <ul>
            {allPokemonFetch.value.results.map(pokemon => (
                <li key={pokemon.name}>{pokemon.name}</li>
            ))}
          </ul>
        );  
      }

      return <div>Loading...</div>;  
    }}
  </ReduxFetch>
);

export default PokemonList;