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.
Provider
✓ import { Provider } from 'redux-bundler-react'
✗ const { Provider } = require('redux-bundler-react')
Used to pass the redux-bundler store down the React component tree via context.
connect
✓ import { connect } from 'redux-bundler-react'
✗ const { connect } = require('redux-bundler-react')
Higher-order component. Connects a React component to specific selectors and action creators by their string names.
{ Provider, connect }
✓ import { Provider, connect } from 'redux-bundler-react'
✗ import connect from 'redux-bundler-react'
Both `Provider` and `connect` are named exports, not default exports.
Demonstrates setting up a basic redux-bundler store, providing it to React via `Provider`, and connecting a component using `connect` to access selectors and action creators by name.
import { connect, Provider } from 'redux-bundler-react';
import { createStore } from 'redux-bundler'; // Assuming redux-bundler is installed
import React from 'react';
import ReactDOM from 'react-dom';
// Minimal example bundle
const myBundle = {
name: 'myBundle',
getSelectors: () => ({
selectMyValue: (state) => state.myValue,
selectOtherValue: (state) => state.otherValue
}),
doUpdateMyValue: (value) => ({ dispatch }) => {
dispatch({ type: 'UPDATE_MY_VALUE', payload: value });
},
reducer: (state = { myValue: 'Hello', otherValue: 'World' }, action) => {
if (action.type === 'UPDATE_MY_VALUE') {
return { ...state, myValue: action.payload };
}
return state;
}
};
const getStore = () => createStore(myBundle);
const MyConnectedComponent = ({ myValue, otherValue, doUpdateMyValue }) => (
<div style={{ padding: '20px', border: '1px solid #ccc', margin: '10px' }}>
<p>Value 1: {myValue}</p>
<p>Value 2: {otherValue}</p>
<button onClick={() => doUpdateMyValue('Updated!')}>Update Value 1</button>
<p>Clicking the button dispatches 'UPDATE_MY_VALUE'.</p>
</div>
);
const ConnectedComponent = connect(
'selectMyValue',
'selectOtherValue',
'doUpdateMyValue',
MyConnectedComponent
);
const AppRoot = () => (
<div>
<h1>Redux-Bundler-React Example</h1>
<ConnectedComponent />
</div>
);
ReactDOM.render(
<Provider store={getStore()}>
<AppRoot />
</Provider>,
document.getElementById('root')
);
Errors
Common errors & fixes
Cannot read properties of undefined (reading 'store')
A component tried to access the redux-bundler store via context, but no `Provider` component was rendered higher in the component tree, or the `store` prop was not passed to `Provider`.
fixEnsure your top-level React application is wrapped with `<Provider store={getStore()}>` and that `getStore()` returns a valid redux-bundler store instance. Error: 'selectXYZ' does not exist in the store
The string name provided to `connect` (e.g., 'selectXYZ') does not match any existing selector or action creator defined in your redux-bundler bundles.
fixDouble-check the spelling and casing of the selector/action creator names passed to `connect`. Verify that the corresponding bundle is correctly loaded into your redux-bundler store.
Audit
Dependencies
reactrequiredPeer dependency for React component rendering.
redux-bundlerrequiredCore state management library that these bindings connect to.