node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »



Flux REST API for redux infrastructure. Support for Immutable Fork from redux-api

Build Status NPM version Coverage Status


redux-api solves the problem of writing clients to communicate with backends. It generates actions and reducers for making AJAX calls to API endpoints. You don't need to write a lot of boilerplate code if you use redux and wanted to exchange data with server.

Inspired by Redux-rest and is intended to be used with Redux.

======= ## Documentation See for API documentation. ## Use cases

======= ## Install with npm

npm install redux-api --save

with bower

bower install redux-api --save

If you don't use tools like webpack, browserify, etc and loading redux-api manually - the best way add redux-api to you project is:

<script src="(...)/redux-api.min.js"></script>
  window.ReduxApi = window["redux-api"];
  // or 
  var ReduxApi = window["redux-api"];
  // initialization code 

======= ## Remote calls

redux-api doesn't bind you to a technology to make AJAX calls. It uses configurable adapters - a pretty simple function which receives 2 arguments: URL of endpoint and options - and returns a Promise as result. The default adapter has an implementation like this:

function adapterFetch(url, options) {
  return fetch(url, options);
// if you like jquery 
function adapterJquery(url, options) {
  return new Promise((success, error)=> {
    $.ajax({ ...options, url, success, error });

This implementation allows one to make any request and process any response.

And of course you have to set up adapter to your redux-api instance before using.

  reduxApi(....).use("fetch", adapterFetch)

======= ## Examples examples/isomorphic - React + Redux + React-Router + Redux-api with webpack and express + github API



import "isomorphic-fetch";
import reduxApi, {transformers} from "redux-api";
import adapterFetch from "redux-api/lib/adapters/fetch";
export default reduxApi({
  // simple edpoint description 
  entry: `/api/v1/entry/:id`,
  // complex endpoint description 
  regions: {
    url: `/api/v1/regions`,
    // reimplement default `transformers.object` 
    transformer: transformers.array,
    // base endpoint options `fetch(url, options)` 
    options: {
      headers: {
        "Accept": "application/json"
}).use("fetch", adapterFetch(fetch)); // it's necessary to point using REST backend 


import React, {PropTypes} from "react";
import { createStore, applyMiddleware, combineReducers } from "redux";
import thunk from "redux-thunk";
import { Provider, connect } from "react-redux";
import rest from "./rest"; //our redux-rest object 
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(rest.reducers);
const store = createStoreWithMiddleware(reducer);
function select(state) {
  return { entry: state.entry, regions: state.regions };
class Application {
  static propTypes = {
    entry: PropTypes.shape({
      loading: PropTypes.bool.isRequired,
      data: PropTypes.shape({
        text: PropTypes.string
    regions: PropTypes.shape({
      loading: PropTypes.bool.isRequired,
      data: PropTypes.array.isRequired
    dispatch: PropTypes.func.isRequired
  componentDidMount() {
    const {dispatch} = this.props;
    // fetch `/api/v1/regions 
    //specify id for GET: /api/v1/entry/1 
    dispatch(rest.actions.entry({id: 1}));
  render() {
    const {entry, regions} = this.props;
    const Regions => <p>{ }</p>)
    return (
        Loading regions: { regions.loading }
        Loading entry: {entry.loading}
        <div>{{ }}</div>
const SmartComponent = connect(select)(Application);
  <Provider store={store}>
    <SmartComponent />

Releases Changelog