Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
reduxPackMiddleware
✓ import { middleware as reduxPackMiddleware } from 'redux-pack';
✗ import reduxPackMiddleware from 'redux-pack'; // CommonJS style for older default exports or incorrect named import
const reduxPackMiddleware = require('redux-pack'); // Not designed for direct require() in modern setups
The primary middleware function to be applied to the Redux store. While not explicitly named `middleware` in the README, this is a common pattern for middleware packages. It is typically a named export, though older packages might have used a default export.
handle
✓ import { handle } from 'redux-pack';
✗ const handle = require('redux-pack').handle; // Old CommonJS syntax
import handle from 'redux-pack'; // Incorrect if it's a named export
Used within reducers to declaratively manage state transitions based on the lifecycle (start, success, failure, always) of a promise action.
ACTION_TYPE_NAME
✓ export const LOAD_FOO = 'LOAD_FOO';
✗ import { LOAD_FOO } from 'redux-pack'; // Action types are user-defined, not imported from the library.
Redux Pack expects users to define their own action type constants. The library does not export pre-defined action type constants for promise lifecycle stages, instead it infers them from the base action type.
Demonstrates setting up a Redux store with `redux-pack` middleware, defining a promise-based action, and handling its lifecycle in a reducer using the `handle` utility, including optional lifecycle hooks in `meta`.
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { middleware as reduxPackMiddleware, handle } from 'redux-pack';
// 1. Define Action Types
export const LOAD_USER = 'LOAD_USER';
// 2. Define an API utility (mock for example)
const Api = {
getUser: (id) => new Promise(resolve => {
setTimeout(() => {
console.log(`Fetching user ${id}...`);
resolve({ id, name: `User ${id}`, email: `user${id}@example.com` });
}, 500);
})
};
// 3. Create an Action Creator
export function loadUser(id) {
return {
type: LOAD_USER,
promise: Api.getUser(id),
meta: {
onStart: () => console.log(`Starting fetch for user ${id}`),
onSuccess: (payload) => console.log('User fetched successfully:', payload),
onFailure: (error) => console.error('Failed to fetch user:', error),
// Other hooks: onFinish, always
}
};
}
// 4. Create a Reducer
const initialState = {
user: null,
isLoading: false,
error: null
};
function userReducer(state = initialState, action) {
switch (action.type) {
case LOAD_USER:
return handle(state, action, {
start: prevState => ({ ...prevState, isLoading: true, error: null }),
success: prevState => ({ ...prevState, isLoading: false, user: action.payload }),
failure: prevState => ({ ...prevState, isLoading: false, error: action.payload }),
finish: prevState => ({ ...prevState })
});
default:
return state;
}
}
// 5. Configure the Redux Store
const rootReducer = combineReducers({
user: userReducer
});
const store = createStore(
rootReducer,
applyMiddleware(reduxPackMiddleware)
);
// 6. Dispatch the action
console.log('Initial state:', store.getState());
store.dispatch(loadUser(123));
store.subscribe(() => {
console.log('Current state:', store.getState());
});
// Example dispatch for a second user (showing different state change)
setTimeout(() => {
store.dispatch(loadUser(456));
}, 1500);
Errors
Common errors & fixes
Error: Actions must be plain objects. Instead, the actual type was: 'Promise'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions.
The `redux-pack` middleware has not been applied to the Redux store, or it's misconfigured, causing Redux to treat the promise-returning action as a non-plain object.
fixEnsure `reduxPackMiddleware` is correctly applied to your Redux store using `applyMiddleware`: `const store = createStore(rootReducer, applyMiddleware(reduxPackMiddleware));`
TypeError: Cannot read properties of undefined (reading 'handle') or handle is not a function
The `handle` utility from `redux-pack` was not imported correctly or `redux-pack` itself was not installed.
fixVerify that `redux-pack` is installed (`npm install redux-pack` or `yarn add redux-pack`) and that `handle` is imported as a named export: `import { handle } from 'redux-pack';` TypeError: A promise must be returned from the action creator (or present in the `promise` key of the action object).
An action dispatched using `redux-pack`'s expected format (an object with a `promise` key) either did not contain a `promise` key or the value associated with `promise` was not a valid Promise instance.
fixEnsure your action creator returns an object with a `promise` key whose value is an actual Promise: `return { type: 'MY_ACTION', promise: myAsyncFunction(), ... };` Audit
Dependencies
reduxrequiredCore state management library that redux-pack extends as middleware.