Registry /
web-framework / cra-template-redux-bundler
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.
composeBundles
✓ import { composeBundles } from 'redux-bundler'
✗ import composeBundles from 'redux-bundler'
Used to combine multiple bundles into a single store enhancer.
createStore
✓ import { createStore } from 'redux-bundler'
✗ import { createStore } from 'redux'
Redux's createStore is re-exported by redux-bundler, or you can use redux-bundler's own store creation.
connect
✓ import { connect } from 'redux-bundler-react'
✗ import { connect } from 'react-redux'
redux-bundler-react provides a connect HOC specifically optimized for redux-bundler's selector patterns.
useBundler
✓ import useBundler from 'redux-bundler-hook'
✗ import { useBundler } from 'redux-bundler-hook'
The primary hook for accessing bundler state and actions in function components. This is a default export.
Demonstrates initializing a redux-bundler store with a simple user bundle and connecting a React component using `redux-bundler-react` to display user status and trigger actions.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createStore, composeBundles } from 'redux-bundler';
import { Provider } from 'react-redux'; // Often used with redux-bundler
import { connect } from 'redux-bundler-react';
const userBundle = {
name: 'user',
reducer: (state = { name: 'Guest', loggedIn: false }, action) => {
if (action.type === 'USER_LOGIN_SUCCESS') {
return { ...state, name: action.payload.name, loggedIn: true };
}
if (action.type === 'USER_LOGOUT') {
return { ...state, name: 'Guest', loggedIn: false };
}
return state;
},
selectUserName: (state) => state.user.name,
selectIsLoggedIn: (state) => state.user.loggedIn,
doLogin: (name) => ({ dispatch }) => {
// Simulate API call
setTimeout(() => {
dispatch({ type: 'USER_LOGIN_SUCCESS', payload: { name } });
}, 500);
},
doLogout: () => ({ dispatch }) => {
dispatch({ type: 'USER_LOGOUT' });
},
};
const appBundles = composeBundles(userBundle);
const store = createStore(appBundles);
function MyComponent({ userName, isLoggedIn, doLogin, doLogout }) {
return (
<div>
<h1>Hello, {userName}!</h1>
{isLoggedIn ? (
<button onClick={doLogout}>Logout</button>
) : (
<button onClick={() => doLogin('Alice')}>Login as Alice</button>
)}
</div>
);
}
const ConnectedMyComponent = connect(
'selectUserName',
'selectIsLoggedIn',
'doLogin',
'doLogout',
)(MyComponent);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<ConnectedMyComponent />
</Provider>
);
Debug
Known issues
deprecatedThe underlying Create React App (CRA) project is now in maintenance mode and no longer actively developed by Meta. While it remains functional, new projects may consider alternative build tools like Vite, Next.js, or similar, which offer faster development and more modern features.fixFor new projects, evaluate modern alternatives. For existing CRA projects, understand that active development for CRA itself has ceased.
affects: >=1.0.0
gotchaRedux-bundler enforces specific naming conventions, particularly for selectors, which must start with the prefix 'select' (e.g., `selectUserName`). Violating this convention will prevent the bundler from recognizing and integrating the selector correctly.fixAlways prefix selector function names within your bundles with 'select'.
affects: >=16.0.0 (redux-bundler)
gotchaRedux-bundler bundles Redux and other dependencies internally. If `NODE_ENV` is not set to 'production' during your build process, Redux's debug blocks may be included in your production bundle, increasing its size.fixEnsure your build command sets `NODE_ENV=production` for production builds to enable tree-shaking and remove debug code. (e.g., `react-scripts build` typically handles this).
affects: >=16.0.0 (redux-bundler)
gotchaRedux-bundler streamlines Redux, but it still represents a learning curve for developers unfamiliar with Redux's core concepts (actions, reducers, middleware) and its own convention-over-configuration approach.fixFamiliarize yourself with Redux fundamentals and redux-bundler's specific patterns, especially how bundles compose state, actions, and selectors. Review the official redux-bundler documentation and examples.
affects: >=1.0.0
Errors
Common errors & fixes
Cannot read properties of undefined (reading 'selectSomeValue')
A selector was referenced in `connect()` or a reactor, but the corresponding bundle was not composed into the store, or the selector name does not follow the `select` prefix convention.
fixVerify that all bundles containing the required selectors are passed to `composeBundles` and that selectors are correctly named (e.g., `selectMyData`).
TypeError: store.doSomething is not a function
An action creator (`doSomething`) defined in a bundle was called directly on the store object, but it was not properly bound or the bundle was not integrated correctly.
fixEnsure the bundle defining `doSomething` is included in `composeBundles`. When using `redux-bundler-react.connect`, list the action creator name (e.g., `'doSomething'`) in the arguments to receive it as a prop. If using hooks, ensure `useBundler` correctly extracts it.
Error: `createStore` expects the first argument to be a reducer
When using `redux-bundler`, `createStore` expects a store enhancer (the result of `composeBundles`), not a traditional Redux reducer.
fixPass the output of `composeBundles(yourBundle1, yourBundle2, ...)` directly to `createStore`.
Audit
Dependencies
redux-bundlerrequiredCore state management library, configured by the template.
react-reduxoptionalStandard React bindings for Redux, often used even with redux-bundler for Provider.
redux-bundler-reactoptionalReact bindings for connecting components to the redux-bundler store using HOCs.
redux-bundler-hookoptionalReact Hooks for connecting components to the redux-bundler store.