Redux-Bundler Create React App Template

Common errors

• Cannot read properties of undefined (reading 'selectSomeValue')

  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.
  fix Verify that all bundles containing the required selectors are passed to `composeBundles` and that selectors are correctly named (e.g., `selectMyData`).

• TypeError: store.doSomething is not a function

  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.
  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.

• Error: `createStore` expects the first argument to be a reducer

  cause When using `redux-bundler`, `createStore` expects a store enhancer (the result of `composeBundles`), not a traditional Redux reducer.
  fix Pass the output of `composeBundles(yourBundle1, yourBundle2, ...)` directly to `createStore`.

Warnings

• deprecated 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.
  Fix: For new projects, evaluate modern alternatives. For existing CRA projects, understand that active development for CRA itself has ceased.
• gotcha 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.
  Fix: Always prefix selector function names within your bundles with 'select'.
• gotcha 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.
  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).
• gotcha 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.
  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.

Install

• npm install cra-template-redux-bundler npm
• yarn add cra-template-redux-bundler yarn
• pnpm add cra-template-redux-bundler pnpm

Imports

• composeBundles
  wrong:

  import composeBundles from 'redux-bundler'

  correct:

  import { composeBundles } from 'redux-bundler'

  Used to combine multiple bundles into a single store enhancer.
• createStore
  wrong:

  import { createStore } from 'redux'

  correct:

  import { createStore } from 'redux-bundler'

  Redux's createStore is re-exported by redux-bundler, or you can use redux-bundler's own store creation.
• connect
  wrong:

  import { connect } from 'react-redux'

  correct:

  import { connect } from 'redux-bundler-react'

  redux-bundler-react provides a connect HOC specifically optimized for redux-bundler's selector patterns.
• useBundler
  wrong:

  import { useBundler } from 'redux-bundler-hook'

  correct:

  import useBundler from 'redux-bundler-hook'

  The primary hook for accessing bundler state and actions in function components. This is a default export.

Quickstart

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.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createStore, composeBundles } from 'redux-bundler';
import { Provider } from 'react-redux'; // Often used with redux-bundler
import { connect } from 'redux-bundler-react';

const userBundle = {
  name: 'user',
  reducer: (state = { name: 'Guest', loggedIn: false }, action) => {
    if (action.type === 'USER_LOGIN_SUCCESS') {
      return { ...state, name: action.payload.name, loggedIn: true };
    }
    if (action.type === 'USER_LOGOUT') {
      return { ...state, name: 'Guest', loggedIn: false };
    }
    return state;
  },
  selectUserName: (state) => state.user.name,
  selectIsLoggedIn: (state) => state.user.loggedIn,
  doLogin: (name) => ({ dispatch }) => {
    // Simulate API call
    setTimeout(() => {
      dispatch({ type: 'USER_LOGIN_SUCCESS', payload: { name } });
    }, 500);
  },
  doLogout: () => ({ dispatch }) => {
    dispatch({ type: 'USER_LOGOUT' });
  },
};

const appBundles = composeBundles(userBundle);
const store = createStore(appBundles);

function MyComponent({ userName, isLoggedIn, doLogin, doLogout }) {
  return (
    <div>
      <h1>Hello, {userName}!</h1>
      {isLoggedIn ? (
        <button onClick={doLogout}>Logout</button>
      ) : (
        <button onClick={() => doLogin('Alice')}>Login as Alice</button>
      )}
    </div>
  );
}

const ConnectedMyComponent = connect(
  'selectUserName',
  'selectIsLoggedIn',
  'doLogin',
  'doLogout',
)(MyComponent);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <ConnectedMyComponent />
  </Provider>
);