React Redux Fetch
A declarative and customizable way to fetch data for React components and manage that data in the Redux state.
Documentation
Goal
The goal of this library is to minimize boilerplate code of crud operations in react/redux applications.
Motivation
Redux provides a clean interface for handling data across your application, but integrating with a web service can become a quite cumbersome, repetitive task. React-refetch by Heroku provides a good alternative, but doesn't keep your fetched data in the application state, which makes it more difficult to debug, handle side effects (e.g. with redux-saga) and integrate with your redux actions. This module is strongly inspired by react-refetch; it exposes a connect()
decorator to keep your components stateless. This function lets you map props to URLs. React-redux-fetch takes these mappings and creates functions which dispatch actions and passes them as props to your component. The response is also passed as a prop to your component with additional pending, fulfilled and rejected flags, just like react-refetch.
Installation
npm install --save react-redux-fetch
yarn add react-redux-fetch
Setup
-
Connect the react-redux-fetch middleware to the Store using
applyMiddleware
:// ...import createStore applyMiddleware from 'redux';import middleware as fetchMiddleware from 'react-redux-fetch';// ...const store = ;// rest unchanged -
Mount react-redux-fetch reducer to the state at
repository
:import combineReducers from 'redux';import reducer as fetchReducer from 'react-redux-fetch';const rootReducer =;;
Examples
react-redux-fetch exposes two ways to connect your component to your api configuration:
GET
Render props
;; 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> { if allPokemonFetchrejected return <div>Oops... Could not fetch Pokémon!</div>; if allPokemonFetchfulfilled return <ul> allPokemonFetchvalueresults </ul> ; return <div>Loading...</div>; } </ReduxFetch>; ;
Higher order component
import React PropTypes from 'react';import connect from 'react-redux-fetch'; Component static propTypes = // injected by react-redux-fetch /** * @var */ dispatchAllPokemonGet: PropTypesfuncisRequired /** * @var */ allPokemonFetch: PropTypesobject ; { thisprops; } { const allPokemonFetch = thisprops; if allPokemonFetchrejected return <div>Oops... Could not fetch Pokémon!</div>; if allPokemonFetchfulfilled return <ul> allPokemonFetchvalueresults </ul> ; return <div>Loading...</div>; } // connect(): Declarative way to define the resource needed for this component resource: 'allPokemon' method: 'get' // You can omit this, this is the default request: url: 'http://pokeapi.co/api/v2/pokemon/' PokemonList;
POST
import React PropTypes from 'react';import connect from 'react-redux-fetch'; Component static propTypes = // injected by parent pokemonOnField: PropTypesobjectisRequired // injected by react-redux-fetch dispatchPokemonPost: PropTypesfuncisRequired pokemonFetch: PropTypesobject ; { const pokemonOnField dispatchPokemonPost = thisprops; ; }; { const pokemonOnField pokemonFetch = thisprops; return <div> <h3>pokemonOnFieldname</h3> <img = =/> !pokemonFetch && <button =>catch!</button> </div> ; } resource: 'pokemon' method: 'post' url: '/api/pokemon/catch' body: id name image )Playground;
PUT
Analogous to POST
DELETE
import React PropTypes from 'react';import connect from 'react-redux-fetch'; Component static propTypes = // injected by parent myPokemon: PropTypesobjectisRequired // injected by react-redux-fetch dispatchPokemonDelete: PropTypesfuncisRequired ; { thisprops; }; { const myPokemon dispatchPokemonDelete = thisprops; return <div> <h3>myPokemonname</h3> <img = =/> <button =>catch!</button> </div> ; } resource: 'pokemon' method: 'delete' url: `/api/pokemon//release` meta: removeFromList: idName: 'id' id: id Pokemon;
A special property removeFromList
can be specified in meta
, which removes an element from the state if the resource value is a list.
(In the example, the pokemon
state contains a collection of Pokémon.)
idName
: The id-key of the object to find and deleteid
: The id-value of the object to find and delete
Code snippets
Versioning
Semver is followed as closely as possible. For updates and migration instructions, see the changelog.