Awesome Redux Ecosystem & Middleware Cheat Sheet

A curated reference guide to essential libraries, action creators, and async middleware patterns in the Redux ecosystem.

Action Creators & Utilities

redux-actions

Creates Flux Standard Action (FSA) compliant action creators:

import { createAction } from 'redux-actions';

const increment = createAction('INCREMENT', amount => amount);
// increment(42) → { type: 'INCREMENT', payload: 42 }

// Automatically handles error objects:
const err = new Error('Network failure');
// increment(err) → { type: 'INCREMENT', payload: err, error: true }

See: redux-actions on npm

---

Flux Standard Action (FSA)

A human-friendly standard for Flux action objects. A compliant action contains only type, payload, error, and optional meta:

// Success action
{
  type: 'ADD_TODO',
  payload: { text: 'Write documentation' }
}

// Error action
{
  type: 'ADD_TODO',
  payload: new Error('Failed to save'),
  error: true
}

See: flux-standard-action on GitHub

---

redux-multi

Enables dispatching an array of actions in a single dispatch call:

store.dispatch([
  { type: 'INCREMENT', payload: 1 },
  { type: 'NOTIFY', payload: 'Count updated' }
]);

---

reduce-reducers

Combines sequential reducers without namespace nesting (unlike combineReducers):

import reduceReducers from 'reduce-reducers';

const combined = reduceReducers(
  (state, action) => (action.type === 'ADD' ? state + action.payload : state),
  (state, action) => (action.type === 'MULTIPLY' ? state * action.payload : state)
);

---

Async Middleware & Side Effects

redux-thunk

Allows writing action creators that return a function instead of an action object, providing access to dispatch and getState:

const fetchUser = (id) => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', payload: error, error: true });
  }
};

// Dispatch like a normal action:
store.dispatch(fetchUser(42));

See: redux-thunk on GitHub

---

redux-promise

FSA-compliant promise middleware. If an action's payload is a Promise, it resolves before dispatching to reducers:

import { createAction } from 'redux-actions';

const fetchPosts = createAction('FETCH_POSTS', async () => {
  const response = await fetch('/api/posts');
  return response.json();
});

// Resolves payload promise automatically:
store.dispatch(fetchPosts());

---

redux-logger

Logs state transitions and dispatched actions directly into the browser developer console:

import { createLogger } from 'redux-logger';

const logger = createLogger({
  collapsed: true,
  diff: true
});