redux-roll

Redux store middleware to roll forward your dispatched actions until they reach their final action object format

Table of Contents

• Overview
• Install
• Examples
• Custom roller

Overview

The main purpose for this code was to learn how to make redux middleware. While you can use it and actually quite usefull, but to be honest, you can archive pretty much all this using just redux-thunk and redux-promise....

Install

Installing redux-roll npm package via npm or yarn:

$ npm install --save redux-roll
$ yarn add redux-roll

Import and usage in your code:

import { createStore, applyMiddleware, combineReducers } from 'redux';
import reduxRoll from 'redux-roll';
 
import * as reducers from './reducers';
 
const rootReducer = combineReducers(reducers);
const middlewares = applyMiddleware(
  reduxRoll
);
 
const store = createStore(roorReducer, middlewares);

Examples

Promises chain

Let's say you have a notification feed with listing references to articles. You can just dispatch the fetch promise for the main notification datafeed with some .then() cases and redux-roll will resolve this promise into the list of promises for the individual articles, and then resolve those into the articles.

// define your actions
function createArticle(articleData) {
  return {type: ARTICLE_FETCH, articleData: articleData};
}
function articleFetchError(error) {
  return {type: ARTICLE_FETCH_ERROR, error};
}
function datafeedFetchError(error) {
  return {type: DATAFEED_FETCH_ERROR, error};
}
 
export function fetchDataFeed(datafeed) {
  return fetch(datafeed.url)
    .then(response => response.json())
    .then(json => json.articles.map(article =>
      fetch(article.url)
        .then(response => response.json())
        .then(article => createArticle(article))
        .catch(error => articleFetchError(error))
    ))
    .catch(error => datafeedFetchError(error));
}
 
// and later in your code
store.dispatch(fetchDataFeed(datafeed));

See code and test.

Pending updates

Redux-roll does not enhance automatically your promises with pending actions, as by design it does not want to impose any restriction on how you design your actions. However if you want pending updates, it very easy to do that.

Simple custom implementation of pending updates for fetch:

store.dispatch([
 {type: "FETCH_PENDING"},
 fetch(url)
   .then(response => response.json())
   .then(json     => ({type: "FETCH_SUCCESS", payload: json}))
   .catch(error   => ({type: "FETCH_ERROR", error: error}))
]);

See code and test.

Credits

Thanks to redux-thunk and redux-promise for the inspiration.

Copyright (c) 2017 Gabor Vizi, licensed with The MIT License (MIT)