{"library":"redux-bundler-react","title":"Redux-Bundler React Bindings","description":"Redux-bundler-react offers dedicated bindings to integrate the redux-bundler state management pattern with React applications. It provides two primary exports: `Provider` for making the redux-bundler store available via React context, and a `connect` higher-order component. Unlike `react-redux`, `connect` in this library takes string names of selectors and action creators, which it then resolves from the store. This string-based approach is a key differentiator, designed to simplify component subscriptions and optimize diffing outside the component itself. The current stable version is 1.2.0, last updated in 2020, indicating a mature but slow-moving project. It emphasizes a clear separation of concerns and runtime validation of requested store elements.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install redux-bundler-react"],"cli":null},"imports":["import { Provider } from 'redux-bundler-react'","import { connect } from 'redux-bundler-react'","import { Provider, connect } from 'redux-bundler-react'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { connect, Provider } from 'redux-bundler-react';\nimport { createStore } from 'redux-bundler'; // Assuming redux-bundler is installed\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n// Minimal example bundle\nconst myBundle = {\n  name: 'myBundle',\n  getSelectors: () => ({\n    selectMyValue: (state) => state.myValue,\n    selectOtherValue: (state) => state.otherValue\n  }),\n  doUpdateMyValue: (value) => ({ dispatch }) => {\n    dispatch({ type: 'UPDATE_MY_VALUE', payload: value });\n  },\n  reducer: (state = { myValue: 'Hello', otherValue: 'World' }, action) => {\n    if (action.type === 'UPDATE_MY_VALUE') {\n      return { ...state, myValue: action.payload };\n    }\n    return state;\n  }\n};\n\nconst getStore = () => createStore(myBundle);\n\nconst MyConnectedComponent = ({ myValue, otherValue, doUpdateMyValue }) => (\n  <div style={{ padding: '20px', border: '1px solid #ccc', margin: '10px' }}>\n    <p>Value 1: {myValue}</p>\n    <p>Value 2: {otherValue}</p>\n    <button onClick={() => doUpdateMyValue('Updated!')}>Update Value 1</button>\n    <p>Clicking the button dispatches 'UPDATE_MY_VALUE'.</p>\n  </div>\n);\n\nconst ConnectedComponent = connect(\n  'selectMyValue',\n  'selectOtherValue',\n  'doUpdateMyValue',\n  MyConnectedComponent\n);\n\nconst AppRoot = () => (\n  <div>\n    <h1>Redux-Bundler-React Example</h1>\n    <ConnectedComponent />\n  </div>\n);\n\nReactDOM.render(\n  <Provider store={getStore()}>\n    <AppRoot />\n  </Provider>,\n  document.getElementById('root')\n);\n","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}