redux-async-await-action-middleware

Redux middleware to enable async/await action creators

Motivation

Use async/await to make Redux as elegant to use with async flows as it is with synchronous, without the learning/complexity overhead of redux-saga or redux-observable etc.

Usage

Include the middleware

import { createStore } from 'redux';
import createAsyncAwaitActionMiddleware from 'redux-async-await-action-middleware';
 
const store = createStore([
    createAsyncAwaitActionMiddleware()
]);

Basic async action creator

export async function loadData() {
    try {
        const response = await fetch('...');
        const data = await response.json();
 
        // Action can be any kind, not just FSA
        return {
            type: 'LOAD_DATA',
            payload: data
        }
    } catch (error) {
        return {
            type: 'LOAD_DATA',
            payload: error,
            isError: true
        }
    }
}
 
...
 
dispatch(loadData());

A more complete async action creator

import { createAction } from 'redux-actions';
 
const LOAD_DATA = 'LOAD_DATA';
const NO_DATA_AVAILABLE = 'NO_DATA_AVAILABLE';
const AUTH_FAILED = 'AUTH_FAILED';
 
const errorHandlers = {
    404: createAction(NO_DATA_AVAILABLE),
    403: createAction(AUTH_FAILED)
}
 
export async function loadData() {
    try {
        const response = await fetch('...');
 
        if (response.statusCode !== 200) {
            const handler = errorHandlers[response.statusCode];
            if (handler) {
                return handler();
            }
 
            throw new Error(`Unexpected Response: ${response.statusCode}:${response.status}`);
        }
 
        const data = await response.json();
 
        return createAction(LOAD_DATA)(data);
    } catch (error) {
        return createAction(LOAD_DATA)(error);
    }
}
 
...
 
dispatch(loadData());

Use with an in-progress action

import { createAction } from 'redux-actions';
 
import store from '../myStore';
 
const LOAD_DATA = 'LOAD_DATA';
const LOAD_DATA_IN_PROGRESS = 'LOAD_DATA_IN_PROGRESS';
 
const dispatch = store.dispatch;
 
export async function loadData() {
    try {
        dispatch(createAction(LOAD_DATA_IN_PROGRESS)());
 
        const response = await fetch('...');
        const data = await response.json();
 
        return createAction(LOAD_DATA)(data);
    } catch (error) {
        return createAction(LOAD_DATA)(error);
    }
}
 
...
 
dispatch(loadData());

Cancel an async action

import { createAction } from 'redux-actions';
 
const LOAD_DATA = 'LOAD_DATA';
const CANCEL_LOAD_DATA = 'CANCEL_LOAD_DATA';
 
export async function loadData() {
    try {
        const response = await fetch('...');
        const data = await response.json();
 
        return createAction(LOAD_DATA)(data);
    } catch (error) {
        return createAction(LOAD_DATA)(error);
    }
}
 
...
 
dispatch(loadData());
 
...
 
dispatch(createAction(CANCEL_LOAD_DATA));

Install

npm i redux-async-await-action-middleware

Test

npm i
npm test