Redux Shapeshifter Middleware

1.3.5 verified Sat Apr 25 auth: no javascript

Redux middleware version 1.3.5 that enhances Redux actions to handle AJAX calls using axios and qs. It allows actions to define API endpoints, methods, payload generators, authentication from Redux store state, and advanced features like ETags, request cancellation, and response transformations. Released under an active maintenance cadence, it differentiates from other Redux async middleware by integrating deeply with axios configuration and supporting generator-based action flows.

Common errors

error TypeError: Cannot read properties of undefined (reading 'types') ↓

cause Action object does not have a 'types' array at the top level or in payload.

fix

Add a 'types' array to your action with three strings for pending, success, and error action types.

error Uncaught (in promise) Error: shapeshifter middleware: payload object is undefined ↓

cause Action payload is not defined or is undefined.

fix

Ensure the action has a 'payload' property with at least a 'url' string.

error Error: shapeshifter middleware: axios is not installed or not passable in config ↓

cause Axios is not installed as a peer dependency.

fix

Run 'npm install axios' or 'yarn add axios'.

error Error: shapeshifter middleware: method must be a valid HTTP method string ↓

cause Action 'method' property is missing or is an invalid HTTP method.

fix

Set 'method' to one of: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS.

Warnings

breaking {action}.payload.types is deprecated in favor of {action}.types ↓

fix Move the 'types' array from payload to the top-level action object.

deprecated The 'errors' array check was fixed in v0.4.1 to only reject when length > 0, but older versions rejected empty arrays. ↓

fix Upgrade to v0.4.1 or later.

gotcha If 'useFullResponseObject' is not set in action or config, the middleware slices the response to only return data. ↓

fix Set 'useFullResponseObject: true' in config or action to get the full axios response object.

gotcha The 'auth' property in config must match a path in the Redux store; otherwise, authentication headers will be undefined. ↓

fix Ensure the nested object path exists in state, e.g., state.user.token for auth: { user: 'token' }.

Install

npm install redux-shapeshifter-middleware

yarn add redux-shapeshifter-middleware

pnpm add redux-shapeshifter-middleware

Imports

default

wrong

const shapeshifter = require('redux-shapeshifter-middleware')

correct

import shapeshifter from 'redux-shapeshifter-middleware'

ESM default export; CJS require also works but typings may be lost.

shapeshifterMiddleware

wrong

import { shapeshifterMiddleware } from 'redux-shapeshifter-middleware'

correct

import shapeshifter from 'redux-shapeshifter-middleware'

The package exports a single function as default. Named import does not exist.

createShapeshifter

wrong

import { createShapeshifter } from 'redux-shapeshifter-middleware'

correct

import shapeshifter from 'redux-shapeshifter-middleware'

There is no named export. Use default import.

Quickstart

Demonstrates setting up the middleware with a base URL and auth config, then dispatching a GET request action with lifecycle types.

import { createStore, applyMiddleware } from 'redux';
import shapeshifter from 'redux-shapeshifter-middleware';

const apiMiddleware = shapeshifter({
  base: 'https://api.example.com/',
  auth: {
    user: 'token'
  },
  fallbackToAxiosStatusResponse: true
});

const reducer = (state = {}) => state;
const store = createStore(reducer, applyMiddleware(apiMiddleware));

// Dispatch an API action
store.dispatch({
  type: 'FETCH_USER',
  types: ['FETCH_USER_PENDING', 'FETCH_USER_SUCCESS', 'FETCH_USER_ERROR'],
  method: 'GET',
  payload: {
    url: '/users/123',
    auth: true
  }
});