Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including redux-async-state-reducer with all npm packages installed. Try it out:

var reduxAsyncStateReducer = require("redux-async-state-reducer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

redux-async-state-reducer v0.1.2

A reducer and actionCreators to handle the asynchronous state of the application

Build Status js-semistandard-style


This is a redux reducer to handle the asynchronous state changes that happen during a request. The idea comes form the Redux documentation on Async Actions


npm install --save redux-async-state-reducer


Combine the reducer into your root reducer, using combineReducers.

import { createStore, combineReducers } from 'redux'
import asyncState from 'redux-async-state-reducer';

import userReducer from './userReducer';

const rootReducer = combineReducers({

const store = createStore(rootReducer);


These action creators can be added to the actions of your application. My solution is to export them with the rest of my action creators.


My Usage

I use this reducer to inform my application of the state of the asynchronous tasks I am processing. Say I am fetching data from a Database, and want to show a loading component until the results come back.

import React, { Component } from 'react';
import axios from 'axios';

import ProgressBar from 'react-toolbox/lib/progress_bar';
import LongList from './LongList';

class Main extends Component {
  constructor(props) {
    const { actions } = this.props // I keep all my actionCreators under actions
    // using component state for demo purposes. Explanation below.
    this.state = {
      error: null,
      data: []
        function fullfilled(result) {
        function rejection(error) {
            error: error

  render() {
      const { asyncState } = this.props;
    return (
      ? <ProgressBar type='circular' mode='indeterminate' />
      : <LongList data={} /> }

I use the other properties didFail & success to help with displaying error as well.

Explanation Instead of using the state of the Component I would dispatch an action with the promise from axios. I would have redux-promise handle this promise by calling then and finally passing the returned data through to the reducers to update the store. However I wanted to show how the request would be made and when to dispatch the actions provided by this module.

License: (MIT)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free