{"library":"redux-bundler-preact","title":"Redux-Bundler Bindings for Preact","description":"Redux-bundler-preact provides essential bindings to integrate redux-bundler with Preact applications. It offers a `Provider` component to make the redux-bundler store available via context and a `connect` higher-order component for mapping selectors and action creators to component props. The current stable version is 2.0.1, which targets Preact versions 10.0.0 and above. Earlier Preact versions (v3-8) require installing redux-bundler-preact v1. Releases are typically tied to major Preact version updates or critical bug fixes, as seen with the 2.0.0 upgrade for Preact X. A key differentiator is its `connect` API, which accepts string names for selectors and action creators, departing from the typical function-based mapStateToProps/mapDispatchToProps patterns found in other Redux bindings, offering improved performance characteristics where diffing happens outside the component itself.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install redux-bundler-preact"],"cli":null},"imports":["import { Provider } from 'redux-bundler-preact'","import { connect } from 'redux-bundler-preact'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { connect, Provider } from 'redux-bundler-preact';\nimport { h } from 'preact'; // Required for JSX in Preact, ensure this is in scope\n\n// Assume './bundles' exports a function that returns a redux-bundler store\n// For this example, we'll create a dummy store.\nconst getStore = () => ({\n  getState: () => ({ myValue: 'Initial Value', myOtherValue: 'Another Value' }),\n  subscribe: () => () => {},\n  dispatch: (action) => console.log('Dispatching action:', action)\n});\n\n// Example AppRoot component that receives props from connect\nconst AppRoot = ({ myValue, myOtherValue, doInitiateSignIn }) => (\n  <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>\n    <h1>Redux-Bundler Preact Example</h1>\n    <p>My Value: <strong>{myValue}</strong></p>\n    <p>My Other Value: <strong>{myOtherValue}</strong></p>\n    <button onClick={doInitiateSignIn} style={{ padding: '10px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>\n      Initiate Sign In\n    </button>\n  </div>\n);\n\n// Connect the AppRoot component to specific selectors and action creators\nconst ConnectedAppRoot = connect(\n  'selectMyValue',      // Placeholder selector name\n  'selectMyOtherValue', // Placeholder selector name\n  'doInitiateSignIn',   // Placeholder action creator name\n  AppRoot\n);\n\n// Render the application with the Provider at the root\nexport default () => (\n  <Provider store={getStore()}> \n    <ConnectedAppRoot />\n  </Provider>\n);\n","lang":"javascript","description":"This example demonstrates how to set up the `Provider` at the application root with a Redux-Bundler store and how to `connect` a component to specific selectors and action creators using their string names.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}