{"id":15577,"library":"cra-template-redux-bundler","title":"Redux-Bundler Create React App Template","description":"cra-template-redux-bundler provides a starting point for building React applications using Create React App with redux-bundler integrated. Redux-bundler, currently at version 29.1.0, is a state management library designed to simplify Redux applications by organizing logic into modular \"bundles.\" It promotes a feature-centric architecture, moving away from the traditional Redux separation of actions, reducers, and selectors into separate directories. Key features include a \"batteries included\" philosophy with optional routing and data fetching capabilities, a \"reactor\" pattern for declarative state reactions, and built-in support for code-splitting and lazy-loading of state logic. This approach significantly reduces boilerplate and aims to improve maintainability and scalability for complex applications, particularly Progressive Web Apps (PWAs) that benefit from small bundle sizes and network resilience. The template itself is at version 1.0.0 and streamlines the initial setup process, configuring the necessary redux-bundler infrastructure within a standard Create React App project.","status":"maintenance","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/umkatakam/cra-template-redux-bundler","tags":["javascript"],"install":[{"cmd":"npm install cra-template-redux-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add cra-template-redux-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add cra-template-redux-bundler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core state management library, configured by the template.","package":"redux-bundler","optional":false},{"reason":"Standard React bindings for Redux, often used even with redux-bundler for Provider.","package":"react-redux","optional":true},{"reason":"React bindings for connecting components to the redux-bundler store using HOCs.","package":"redux-bundler-react","optional":true},{"reason":"React Hooks for connecting components to the redux-bundler store.","package":"redux-bundler-hook","optional":true}],"imports":[{"note":"Used to combine multiple bundles into a single store enhancer.","wrong":"import composeBundles from 'redux-bundler'","symbol":"composeBundles","correct":"import { composeBundles } from 'redux-bundler'"},{"note":"Redux's createStore is re-exported by redux-bundler, or you can use redux-bundler's own store creation.","wrong":"import { createStore } from 'redux'","symbol":"createStore","correct":"import { createStore } from 'redux-bundler'"},{"note":"redux-bundler-react provides a connect HOC specifically optimized for redux-bundler's selector patterns.","wrong":"import { connect } from 'react-redux'","symbol":"connect","correct":"import { connect } from 'redux-bundler-react'"},{"note":"The primary hook for accessing bundler state and actions in function components. This is a default export.","wrong":"import { useBundler } from 'redux-bundler-hook'","symbol":"useBundler","correct":"import useBundler from 'redux-bundler-hook'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { createStore, composeBundles } from 'redux-bundler';\nimport { Provider } from 'react-redux'; // Often used with redux-bundler\nimport { connect } from 'redux-bundler-react';\n\nconst userBundle = {\n name: 'user',\n reducer: (state = { name: 'Guest', loggedIn: false }, action) => {\n if (action.type === 'USER_LOGIN_SUCCESS') {\n return { ...state, name: action.payload.name, loggedIn: true };\n }\n if (action.type === 'USER_LOGOUT') {\n return { ...state, name: 'Guest', loggedIn: false };\n }\n return state;\n },\n selectUserName: (state) => state.user.name,\n selectIsLoggedIn: (state) => state.user.loggedIn,\n doLogin: (name) => ({ dispatch }) => {\n // Simulate API call\n setTimeout(() => {\n dispatch({ type: 'USER_LOGIN_SUCCESS', payload: { name } });\n }, 500);\n },\n doLogout: () => ({ dispatch }) => {\n dispatch({ type: 'USER_LOGOUT' });\n },\n};\n\nconst appBundles = composeBundles(userBundle);\nconst store = createStore(appBundles);\n\nfunction MyComponent({ userName, isLoggedIn, doLogin, doLogout }) {\n return (\n
\n
Hello, {userName}!
\n {isLoggedIn ? (\n \n ) : (\n \n )}\n
\n );\n}\n\nconst ConnectedMyComponent = connect(\n 'selectUserName',\n 'selectIsLoggedIn',\n 'doLogin',\n 'doLogout',\n)(MyComponent);\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n);\n","lang":"javascript","description":"Demonstrates initializing a redux-bundler store with a simple user bundle and connecting a React component using `redux-bundler-react` to display user status and trigger actions."},"warnings":[{"fix":"For new projects, evaluate modern alternatives. For existing CRA projects, understand that active development for CRA itself has ceased.","message":"The underlying Create React App (CRA) project is now in maintenance mode and no longer actively developed by Meta. While it remains functional, new projects may consider alternative build tools like Vite, Next.js, or similar, which offer faster development and more modern features.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always prefix selector function names within your bundles with 'select'.","message":"Redux-bundler enforces specific naming conventions, particularly for selectors, which must start with the prefix 'select' (e.g., `selectUserName`). Violating this convention will prevent the bundler from recognizing and integrating the selector correctly.","severity":"gotcha","affected_versions":">=16.0.0 (redux-bundler)"},{"fix":"Ensure your build command sets `NODE_ENV=production` for production builds to enable tree-shaking and remove debug code. (e.g., `react-scripts build` typically handles this).","message":"Redux-bundler bundles Redux and other dependencies internally. If `NODE_ENV` is not set to 'production' during your build process, Redux's debug blocks may be included in your production bundle, increasing its size.","severity":"gotcha","affected_versions":">=16.0.0 (redux-bundler)"},{"fix":"Familiarize yourself with Redux fundamentals and redux-bundler's specific patterns, especially how bundles compose state, actions, and selectors. Review the official redux-bundler documentation and examples.","message":"Redux-bundler streamlines Redux, but it still represents a learning curve for developers unfamiliar with Redux's core concepts (actions, reducers, middleware) and its own convention-over-configuration approach.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Verify that all bundles containing the required selectors are passed to `composeBundles` and that selectors are correctly named (e.g., `selectMyData`).","cause":"A selector was referenced in `connect()` or a reactor, but the corresponding bundle was not composed into the store, or the selector name does not follow the `select` prefix convention.","error":"Cannot read properties of undefined (reading 'selectSomeValue')"},{"fix":"Ensure the bundle defining `doSomething` is included in `composeBundles`. When using `redux-bundler-react.connect`, list the action creator name (e.g., `'doSomething'`) in the arguments to receive it as a prop. If using hooks, ensure `useBundler` correctly extracts it.","cause":"An action creator (`doSomething`) defined in a bundle was called directly on the store object, but it was not properly bound or the bundle was not integrated correctly.","error":"TypeError: store.doSomething is not a function"},{"fix":"Pass the output of `composeBundles(yourBundle1, yourBundle2, ...)` directly to `createStore`.","cause":"When using `redux-bundler`, `createStore` expects a store enhancer (the result of `composeBundles`), not a traditional Redux reducer.","error":"Error: `createStore` expects the first argument to be a reducer"}],"ecosystem":"npm"}