{"library":"redux-bundler-hook","title":"Redux-Bundler React Hooks","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install redux-bundler-hook"],"cli":null},"imports":["import { ReduxBundlerProvider } from 'redux-bundler-hook'","import { useConnect } from 'redux-bundler-hook'","import { useReduxBundlerStore } from 'redux-bundler-hook'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { hydrate } from 'react-dom';\nimport { ReduxBundlerProvider, useConnect } from 'redux-bundler-hook';\nimport React from 'react';\n\n// Imagine '../bundles' exports a function that creates your redux-bundler store\n// For this example, we'll create a minimal mock\nconst createStore = () => ({\n  getState: () => ({ route: { component: () => <p>Default Routed Component</p> }, colorScheme: 'light' }),\n  selectRoute: () => ({ component: () => <p>Routed Component!</p> }),\n  selectColorScheme: () => 'dark',\n  doSetColorScheme: (scheme) => console.log('Setting color scheme:', scheme),\n  subscribe: () => () => {},\n  dispatch: () => {}\n});\n\nconst store = createStore();\n\nfunction AppLayout({ children }) {\n  return (\n    <div>\n      <h1>App Header</h1>\n      {children}\n      <h2>App Footer</h2>\n    </div>\n  );\n}\n\nexport default function App() {\n  const {\n    route: { component: RoutedComponent },\n    colorScheme,\n    doSetColorScheme,\n  } = useConnect('selectRoute', 'selectColorScheme', 'doSetColorScheme');\n\n  return (\n    <AppLayout>\n      <RoutedComponent colorScheme={colorScheme} onSetColorScheme={doSetColorScheme} />\n      <button onClick={() => doSetColorScheme(colorScheme === 'dark' ? 'light' : 'dark')}>\n        Toggle Color Scheme\n      </button>\n    </AppLayout>\n  );\n}\n\n// Assume there's a div with id 'root' in your HTML\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  hydrate(\n    <ReduxBundlerProvider store={store}>\n      <App />\n    </ReduxBundlerProvider>,\n    rootElement\n  );\n} else {\n  console.warn(\"Root element 'root' not found. Quickstart code cannot hydrate.\");\n}\n","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}