{"library":"redux-bundler","title":"Redux Bundler","description":"Redux Bundler is a pragmatic state management library that facilitates building Redux stores by composing smaller, self-contained units of functionality called 'bundles.' Designed with Progressive Web Apps (PWAs) in mind, it emphasizes small bundle sizes, network resilience, and explicit state management, aiming to reduce the boilerplate often associated with traditional Redux setups. It formalizes an opinionated 'ducks pattern,' consolidating actions, reducers, and selectors for a specific feature into a single bundle file. The library provides a convention-over-configuration approach for managing side effects through 'reactors' and includes a lightweight, optional routing system. While it leverages and re-exports much of Redux's core functionality, it offers an alternative to Redux Toolkit, providing a distinct organizational structure and patterns. The current stable version is 29.1.0, with a rapid release cadence often including major version bumps even for non-breaking changes to ensure safety. It uniquely supports running entirely within a WebWorker and enables code-splitting and lazy-loading of Redux logic.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install redux-bundler"],"cli":null},"imports":["import { composeBundles } from 'redux-bundler'","import { createSelector } from 'redux-bundler'","import { createStore } from 'redux-bundler'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { composeBundles } from 'redux-bundler';\n\nconst userBundle = {\n  name: 'user',\n  getReducer: () => {\n    const initialState = { name: 'Guest', isAuthenticated: false, loading: false };\n    return (state = initialState, action) => {\n      switch (action.type) {\n        case 'USER_LOGIN_START':\n          return { ...state, loading: true };\n        case 'USER_LOGIN_SUCCESS':\n          return { ...state, name: action.payload.name, isAuthenticated: true, loading: false };\n        case 'USER_LOGOUT':\n          return { ...initialState };\n        default:\n          return state;\n      }\n    };\n  },\n  selectUserName: (state) => state.user.name,\n  selectIsAuthenticated: (state) => state.user.isAuthenticated,\n  selectUserLoading: (state) => state.user.loading,\n  doLogin: (payload) => ({ dispatch, store }) => {\n    dispatch({ type: 'USER_LOGIN_START' });\n    // Simulate API call\n    setTimeout(() => {\n      const userName = payload.username || 'Test User';\n      dispatch({ type: 'USER_LOGIN_SUCCESS', payload: { name: userName } });\n      console.log(`User '${store.selectUserName()}' logged in.`);\n    }, 500);\n  },\n  doLogout: () => ({ dispatch }) => {\n    dispatch({ type: 'USER_LOGOUT' });\n    console.log('User logged out.');\n  },\n};\n\nconst getStore = composeBundles(userBundle);\nconst store = getStore();\n\n// Subscribe to changes (optional, but common in frameworks like React)\nstore.subscribe(() => {\n  console.log('Current user name:', store.selectUserName());\n  console.log('Is authenticated:', store.selectIsAuthenticated());\n});\n\n// Dispatch actions\nstore.doLogin({ username: 'Alice' });\n\nsetTimeout(() => {\n  store.doLogout();\n}, 1000);","lang":"javascript","description":"This example demonstrates defining a simple user bundle with a reducer, selectors, and action creators. It then composes this bundle to create a Redux store, dispatches actions, and shows how to select state and subscribe to changes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}