Registry / web-framework / redux-bundler-hook

redux-bundler-hook

library1.0.3jsnpmunverified

Redux-Bundler Hook provides React bindings for the Redux-Bundler library, leveraging modern React Hooks for state management within React applications. Its current stable version is 1.0.3, with recent updates focusing on performance improvements, bug fixes, and the introduction of the `useReduxBundlerStore` hook. This package aims to simplify integrating a `redux-bundler` store into React components by offering `useConnect` for selecting specific bundle selectors and actions, and `ReduxBundlerProvider` for making the store available throughout the component tree. It maintains a relatively stable release cadence with minor updates and fixes, primarily driven by community needs and `redux-bundler` ecosystem changes. Key differentiators include its tight integration with `redux-bundler`'s design patterns and its use of standard React Hooks.

web-framework

npm install redux-bundler-hook

github ↗package ↗

INSTALL

IMPORT

SIG · REDUX-BUNDLER-HOOK

redux-bundler-hook

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReduxBundlerProvider

✓ import { ReduxBundlerProvider } from 'redux-bundler-hook'

✗ const { ReduxBundlerProvider } = require('redux-bundler-hook')

Used to wrap the root of your React application to make the Redux-Bundler store available via context. ESM-only usage is standard.

useConnect

✓ import { useConnect } from 'redux-bundler-hook'

✗ const { useConnect } = require('redux-bundler-hook')

The primary hook for connecting React components to the Redux-Bundler store, allowing selection of data and dispatching actions. This is an ESM-only hook.

useReduxBundlerStore

✓ import { useReduxBundlerStore } from 'redux-bundler-hook'

✗ const { useReduxBundlerStore } = require('redux-bundler-hook')

A utility hook introduced in v1.0.3 to directly access the `redux-bundler` store instance from within a component. Useful for advanced use cases or when the store itself is needed. This is an ESM-only hook.

This quickstart demonstrates how to set up `ReduxBundlerProvider` at the application root and use the `useConnect` hook in a functional component to access selectors and actions from the Redux-Bundler store.

import { hydrate } from 'react-dom'; import { ReduxBundlerProvider, useConnect } from 'redux-bundler-hook'; import React from 'react'; // Imagine '../bundles' exports a function that creates your redux-bundler store // For this example, we'll create a minimal mock const createStore = () => ({ getState: () => ({ route: { component: () => <p>Default Routed Component</p> }, colorScheme: 'light' }), selectRoute: () => ({ component: () => <p>Routed Component!</p> }), selectColorScheme: () => 'dark', doSetColorScheme: (scheme) => console.log('Setting color scheme:', scheme), subscribe: () => () => {}, dispatch: () => {} }); const store = createStore(); function AppLayout({ children }) { return ( <div> <h1>App Header</h1> {children} <h2>App Footer</h2> </div> ); } export default function App() { const { route: { component: RoutedComponent }, colorScheme, doSetColorScheme, } = useConnect('selectRoute', 'selectColorScheme', 'doSetColorScheme'); return ( <AppLayout> <RoutedComponent colorScheme={colorScheme} onSetColorScheme={doSetColorScheme} /> <button onClick={() => doSetColorScheme(colorScheme === 'dark' ? 'light' : 'dark')}> Toggle Color Scheme </button> </AppLayout> ); } // Assume there's a div with id 'root' in your HTML const rootElement = document.getElementById('root'); if (rootElement) { hydrate( <ReduxBundlerProvider store={store}> <App /> </ReduxBundlerProvider>, rootElement ); } else { console.warn("Root element 'root' not found. Quickstart code cannot hydrate."); }

Debug

Known issues

gotchaFailing to provide a valid `redux-bundler` store to `ReduxBundlerProvider` will result in runtime errors due to context not being initialized.

fix

Ensure that `createStore()` from your bundles is called and its result is passed to the `store` prop of `ReduxBundlerProvider`.

affects: >=1.0.0

gotchaPrior to version 1.0.1, the `useConnect` hook had a bug where it wouldn't reliably auto-update if its arguments (the selector/action names) changed dynamically. While less common, this could lead to stale data or actions.

fix

Upgrade to version 1.0.1 or higher to ensure `useConnect` properly re-evaluates its connections when arguments change.

affects: 1.0.0

gotchaThis package is designed for modern React applications using hooks. Attempting to use its hooks outside of a functional React component or without a `ReduxBundlerProvider` higher in the tree will lead to 'Invalid hook call' or context-related errors.

fix

Ensure all hook calls (`useConnect`, `useReduxBundlerStore`) are made within React functional components and that the application is wrapped by `ReduxBundlerProvider`.

affects: >=1.0.0

gotchaThis library expects `redux-bundler` and `react` to be installed as peer dependencies. Mismatched or missing versions can lead to unexpected behavior or errors.

fix

Install `redux-bundler` and `react` at versions compatible with your project, typically by running `npm install redux-bundler react` alongside this package.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Invalid hook call. Hooks can only be called inside of the body of a functional component.

Attempting to call `useConnect` or `useReduxBundlerStore` outside of a React functional component or custom hook.

fix

Ensure `useConnect` or `useReduxBundlerStore` are only called at the top level of a functional component or another custom hook.

Error: Could not find redux-bundler store in the context. Did you wrap your app in a <ReduxBundlerProvider>? (This can happen if you have multiple versions of React)

The `ReduxBundlerProvider` component was not rendered or the store prop was not provided, or there's a React context issue, possibly due to multiple React instances.

fix

Verify that `<ReduxBundlerProvider store={yourStore}>` wraps your component tree and that `yourStore` is a valid `redux-bundler` store instance. Check for duplicate React installations in your `node_modules`.

TypeError: Cannot read properties of undefined (reading 'selectRoute')

A selector or action name passed to `useConnect` does not exist on the `redux-bundler` store's state or actions object, or the store itself is undefined.

fix

Double-check the string arguments passed to `useConnect` against the names of your `redux-bundler` selectors and actions. Ensure the store is correctly initialized and passed to `ReduxBundlerProvider`.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

redux-bundlerrequiredCore state management library that this package provides bindings for.

reactrequiredRequired for React component rendering and hooks functionality.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/abuinitski/redux-bundler-hook ↗

packagehttps://www.npmjs.com/package/redux-bundler-hook ↗