redux-asyncState-reducer

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

Install

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

Usage

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({
  asyncState,
  userReducer
});

const store = createStore(rootReducer);

ActionCreators

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.

|actionCreator|isFetching|didFail|success| |-------------|------------|---------|---------| |request |true |false |false | |requestFail|false |true |false | |requestSuccess|false |false |true |

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) {
    super(props);
    const { actions } = this.props // I keep all my actionCreators under actions
    actions.request();
    // using component state for demo purposes. Explanation below.
    this.state = {
      error: null,
      data: []
    };
    axios.get('path/to/data')
      .then(
        function fullfilled(result) {
          actions.requestSuccess();
          this.setState({
            data: result.data
          });
        },
        function rejection(error) {
          actions.requestFail();
          this.setState({
            error: error
          });
        });
  }

  render() {
      const { asyncState } = this.props;
    return (
      {asyncState.get('isFetching') 
      ? <ProgressBar type='circular' mode='indeterminate' />
      : <LongList data={this.state.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)