Redux Async Action Middleware

Install

1npm install --save redux-async-action-middleware

CommonJS

1var asyncMiddleware = require('redux-async-action-middleware').default;

ES Modules

1import asyncMiddleware from 'redux-async-action-middleware';

Why Do I Need This?

Just like Redux Thunk if you're not sure whether you need it, you probably don't.

Motivation

This middleware was inspired by Redux Thunk and Redux Async. After using a variation of Redux Async, I had realized that defining the three LOAD, SUCCESS, and FAIL redux event types were redundant and not necessary for my use. I also didn't like the non-standard organization of metadata vs payload. So following the lead of Redux Promise, I adopted the Flux Standard Action convention. The result is a combination of everything I liked from all three of these middleware modules.

Usage

Redux Thunk

There is a slight variation compared to Redux Thunk Composition

1- function (dispatch, getState, extraArg) { ... }
2+ function ({dispatch, getState, ...extraArgs}) { ... }

Note how instead of three arguments it is now a single object that contains dispatch, getState, and a spread of the extraArg object passed into the middleware creator. This was - in my opinion - a cleaner way to enable easy access to only the needed arguments by leveraging the destructuring feature.

Async Actions

1import { createStore, applyMiddleware } from 'redux';
2import asyncMiddleware from 'redux-async-action-middleware';
3import axios from 'axios';
4import rootReducer from './reducers';
5
6const http = axios.create({
7    baseURL: 'https://example.com/api',
8    timeout: 1000,
9    headers: {'X-Custom-Header': 'foobar'}
10});
11
12// Note: this API requires redux@>=3.1.0
13const store = createStore(
14  rootReducer,
15  applyMiddleware(asyncMiddleware({http}))
16);
17
18
19const getThing = (id) => ({
20    type: 'FETCH_THINGS',
21    payload: ({http}) => http.get(`/thing/${id}`
22});
23
24const getStuffedThing = (id) => ({
25    type: 'FETCH_STUFF_THING',
26    payload: ({dispatch, http}) => http.get(`/stuff/${id}`)
27        .then((result) => dispatch(getThing(result.data.thingId)))
28});
29
30store.dispatch(getThing(1));
31store.dispatch(getStuffedThing(2));

Async Actions Redux Store Access

1import React, {Component, PropTypes} from 'react';
2import {bindActionCreators} from 'redux';
3import {getFoo} from './reducers/foo';
4
5@connect(state => ({foo: state.foo}),
6    dispatch => bindActionCreators({getFoo})
7)
8export class Foo extends Component {
9    static propTypes = {
10        foo: PropTypes.object.isRequired,
11        getFoo: PropTypes.func.isRequired
12    }
13
14    componentWillMount() {
15        const {getFoo} = this.props;
16        getFoo();
17    }
18
19    render() {
20        const {foo: {loading, loaded, payload}} = this.props;
21
22        return (
23            <div>
24                {loading && <p>loading...</p>}
25                {loaded && <p>{payload}</p>}
26            </div>
27        )
28    }
29}