redux-simple-async

Simple library for creating and firing off asynchronous actions in redux.

Install

npm install --save redux-simple-async

Adding as middleware

import { compose, applyMiddleware } from 'redux';
import { asyncMiddleware } from 'redux-simple-async'
...
const enhancers = [someMiddleware, someOtherMiddleware, asyncMiddleware, yetAnotherPieceOfMiddleware];
...
const store = createStore(rootReducer, compose(applyMiddleware(...enhancers)));

Usage

With no payload:

// getUsers.ts
export const getUsers = createAsyncAction('GET_USERS',
    async (dispatch, getState) => {
        try {
            const state = getState(); // use getState to get the state of the redux store
            const token = getToken(state);
            const users = await dispatch(getUsersFromApi(token)); // fire off and wait for other async actions
            dispatch(storeUsers(users));
        }
        catch (e) {
            dispatch(storeError(e));
        }
    }

// userPage.container.ts
const mapDispatchToProps = dispatch => ({
    loadUsers: () => dispatch(getUsers())
});

With Payload:

// editUser.ts
export const editUser = createAsyncAction<User>('EDIT_USER',
    async (dispatch, getState, userToEdit) => {
        try {
            const state = getState();
            const token = getToken(state);
            await dispatch(editUserFromApi(userToEdit, token));
        }
        catch (e) {
            dispatch(storeError(e));
        }
    });

//userPage.container.ts
const mapDispatchToProps = dispatch => ({
    editUser: (user) => dispatch(editUser(user))
});