redux-sagas-injector

1.1.5 verified Fri May 01 auth: no javascript

A library for dynamically injecting Redux sagas at runtime, enabling code splitting and lazy loading of sagas. Version 1.1.5 supports redux-saga 1.x and provides helpers for HMR and SSR. Unlike manual store manipulation, it uses a central key-based tracking mechanism and works alongside redux-reducers-injector. It has a small API surface (createInjectSagasStore, injectSaga, injectSagaBulk, reloadSaga) and is popular in universal/isomorphic React apps. Release cadence is irregular; current version fixes security issues in dependencies. Key differentiators: built-in HMR support, context store usage, and compatibility with react-universal-component.

Common errors

error Error: Actions must be plain objects. Use custom middleware for async actions. ↓

cause Saga was not properly injected or the sagaMiddleware was not applied to the store. This often happens when using createStore instead of createInjectSagasStore, or when sagaMiddleware is not included in enhancers.

fix

Use createInjectSagasStore (not createStore) and ensure sagaMiddleware is in the applyMiddleware chain. Example: const store = createInjectSagasStore({}, rootReducer, initialState, compose(applyMiddleware(sagaMiddleware)));

error TypeError: sagaMiddleware.run is not a function ↓

cause The sagaMiddleware imported from redux-sagas-injector is not a function; it's a pre-initialized middleware instance. Trying to call .run on it directly fails.

fix

Do not call sagaMiddleware.run(). The library handles running sagas internally via injectSaga. If you need to run a root saga manually, use createInjectSagasStore with initial sagas object.

error Cannot find module 'redux-sagas-injector/lib/sagaMiddleware' ↓

cause Trying to import from an internal path that does not exist in the library's published package. The sagaMiddleware is exported from the main entry point.

fix

Import as: import { sagaMiddleware } from 'redux-sagas-injector';

error injectSaga is not a function ↓

cause Using default import instead of named import. The library does not have a default export.

fix

Use named import: import { injectSaga } from 'redux-sagas-injector';

Warnings

breaking Version 1.0.0 dropped support for redux-saga 0.x; saga must be a generator function or fork/race pattern. The old 0.2.x versions are incompatible with redux-saga 1.x. ↓

fix Upgrade redux-saga to 1.x and ensure all sagas are generator functions. Remove any legacy buffer or channel usage.

deprecated In version 0.2.9, using transform-runtime for generators caused issues; the library reverted to 0.2.9 for generator compatibility. This is no longer relevant in v1.x. ↓

fix Upgrade to v1.0.0 or later to avoid transform-runtime conflicts.

gotcha injectSaga with a duplicate key silently does nothing. There is no error or warning. This can lead to sagas not being replaced if you expect it to work like injectReducer for reducers. ↓

fix Use reloadSaga to replace an existing saga, or call injectSaga only once per key (e.g., in component lifecycle). If using React component, ensure injectSaga is called only on mount.

gotcha The sagaMiddleware exported by this library is a single instance. If you create multiple stores, they will share the same middleware instance, which may cause issues (e.g., sagas from one store influencing another). ↓

fix Only use one store per application, or create your own sagaMiddleware using createSagaMiddleware from redux-saga if you need multiple stores.

deprecated The package uses deprecated dependency 'redux-reducers-injector' which has similar API. Consider using Redux Toolkit's dynamic reducers approach instead, as this library is not actively maintained (last release 2020). ↓

fix Evaluate migrating to Redux Toolkit's configureStore and dynamic middleware/reducer injection patterns.

Install

npm install redux-sagas-injector

yarn add redux-sagas-injector

pnpm add redux-sagas-injector

Imports

createInjectSagasStore
wrong
```
const createInjectSagasStore = require('redux-sagas-injector')
```
correct
```
import { createInjectSagasStore } from 'redux-sagas-injector'
```
Library supports both ESM and CJS. Use named import for ESM; require will give an object with named exports.

injectSaga

wrong

import injectSaga from 'redux-sagas-injector'

correct

import { injectSaga } from 'redux-sagas-injector'

Default import is not available; must use named import.

sagaMiddleware
wrong
```
import sagaMiddleware from 'redux-sagas-injector/lib/sagaMiddleware'
```
correct
```
import { sagaMiddleware } from 'redux-sagas-injector'
```
sagaMiddleware is a pre-initialized middleware instance; no need to create your own with createSagaMiddleware.
reloadSaga
```
import { reloadSaga } from 'redux-sagas-injector'
```
Used for HMR; accepts the same key as injectSaga and the new saga module.
injectSagaBulk
```
import { injectSagaBulk } from 'redux-sagas-injector'
```
Accepts an array of objects with 'key' and 'saga' properties.

Quickstart

Demonstrates creating a store with injected sagas, injecting a saga later, and hot reloading. Uses TypeScript-style imports but works in JavaScript.

import { createStore, applyMiddleware, compose } from 'redux';
import { createInjectSagasStore, sagaMiddleware, reloadSaga, injectSaga } from 'redux-sagas-injector';

// Define a sample saga
function* mySaga() {
  console.log('Saga started');
}

// Create store with inject capability (replaces createStore)
const rootReducer = (state = {}) => state;
const store = createInjectSagasStore(
  { rootSaga: mySaga },  // initial sagas as object { key: sagaFunc }
  rootReducer,
  undefined,
  compose(applyMiddleware(sagaMiddleware))
);

// Inject additional saga later
injectSaga('anotherSaga', function* () {
  console.log('Injected saga runs');
});

// HMR example (in module)
if (module.hot) {
  module.hot.accept('./sagas', () => {
    const newSaga = require('./sagas').default;
    reloadSaga('rootSaga', newSaga);
  });
}