redux-reducers-injector

0.3.5 verified Fri May 01 auth: no javascript

Library to dynamically inject reducers into a Redux store at runtime, supporting Hot Module Replacement (HMR) and Server-Side Rendering (SSR). Version 0.3.5 is the latest stable release. It wraps Redux's createStore to accept an uncombined reducer tree and allows adding reducers via injectReducer at any path. Key differentiators include support for nested reducer injection without combineReducers, forced reinjection, bulk injection, and explicit reloadReducer for HMR. Maintained by GuillaumeCisco and based on the work of redux-injector. The package has a small footprint but lacks TypeScript types and relies on lodash.set.

Common errors

error TypeError: (0 , _redux.combineReducers) is not a function ↓

cause When passing a combined reducer (result of combineReducers) to createInjectStore, it tries to combine it again causing an error.

fix

Pass an object of reducer functions without combining them first.

error Cannot read property 'replaceReducer' of undefined ↓

cause injectReducer called before the store is created or store reference not properly set.

fix

Ensure createInjectStore is called and the store is fully initialized before calling injectReducer. For SSR, pass the store as the context parameter.

error Uncaught Error: Store does not have an inject store enhancer. Did you use createInjectStore? ↓

cause injectReducer called on a store that was not created with createInjectStore (e.g., created with plain createStore).

fix

Use createInjectStore (from this package) to create the store, not createStore from redux.

Warnings

gotcha Do NOT combine reducers with combineReducers before passing to createInjectStore. If you do, you cannot inject into any previously combined reducers. ↓

fix Pass an object tree of reducer functions (without combineReducers) to createInjectStore.

gotcha injectReducer uses lodash.set for path resolution. Paths with dots are interpreted as nested keys. Ensure your path does not accidentally create unexpected nesting. ↓

fix Use string paths like 'data.form' to indicate nesting. For literal dots in keys, escape or avoid dot notation.

gotcha If you use SSR, the store reference is stored in the module's scope (singleton). Concurrent requests may share the same store reference, causing race conditions. ↓

fix In v0.3.0+, use the optional store parameter in injectReducer to specify a context store. For older versions, avoid SSR or implement per-request store management manually.

deprecated The package does not ship TypeScript definitions. Users must create custom .d.ts or use @types/redux-reducers-injector (if available). ↓

fix Add declare module 'redux-reducers-injector' { ... } or use a type assertion.

Install

npm install redux-reducers-injector

yarn add redux-reducers-injector

pnpm add redux-reducers-injector

Imports

createInjectStore

wrong

import createInjectStore from 'redux-reducers-injector'

correct

import { createInjectStore } from 'redux-reducers-injector'

It is a named export, not default.

injectReducer

wrong

const injectReducer = require('redux-reducers-injector').injectReducer

correct

import { injectReducer } from 'redux-reducers-injector'

CommonJS require is acceptable but ESM is preferred. Ensure you are not using default import.

injectReducerBulk

wrong

import { injectReducerBulk } from 'redux-reducers-injector' (typo: injectReducerBulk vs injectReducerBulk)

correct

import { injectReducerBulk } from 'redux-reducers-injector'

Named export; spelling is 'injectReducerBulk' (with capital B).

reloadReducer

wrong

import { reloadReducer } from 'redux-reducers-injector' (confusion with injectReducer)

correct

import { reloadReducer } from 'redux-reducers-injector'

Used for HMR; forces reinjection similarly to injectReducer with force=true.

Quickstart

Demonstrates how to create a Redux store with redux-reducers-injector using an uncombined reducer object and inject a new reducer dynamically.

import { createStore, combineReducers } from 'redux';
import { createInjectStore, injectReducer } from 'redux-reducers-injector';

// Define reducers as a nested object (DO NOT combine)
const reducersObject = {
  router: (state = {}, action) => state,
  data: {
    user: (state = {}, action) => state,
    auth: {
      loggedIn: (state = false, action) => state,
      loggedOut: (state = false, action) => state
    },
    info: (state = {}, action) => state
  }
};

// Create store with inject capability
const store = createInjectStore(reducersObject, {});

// Later, inject a new reducer at 'data.form'
const formReducer = (state = {}, action) => state;
injectReducer('data.form', formReducer);

// Access state as usual
console.log(store.getState());
// { router: {}, data: { user: {}, auth: { loggedIn: false, loggedOut: false }, info: {}, form: {} } }