Redux Saga

Common errors

• TypeError: createSagaMiddleware is not a function

  cause `createSagaMiddleware` is typically a default export from `redux-saga`.
  fix Change your import statement to `import createSagaMiddleware from 'redux-saga';` instead of `import { createSagaMiddleware } from 'redux-saga';`.

• Error: takeEvery(pattern, saga): saga argument must be a Generator function!

  cause The second argument passed to `takeEvery` (or similar effect creators) must be a generator function (e.g., `function* mySaga() { ... }`).
  fix Ensure the saga function passed to `takeEvery` is declared as a generator function, e.g., `function* myWorkerSaga() { yield put({ type: 'ACTION' }); }`.

• TS2307: Cannot find module 'redux-saga/effects' or its corresponding type declarations.

  cause This error often indicates incorrect `moduleResolution` in `tsconfig.json` or issues with package installation/bundler configuration, preventing TypeScript from finding the submodule types.
  fix Verify that `redux-saga` is correctly installed. Check your `tsconfig.json`'s `compilerOptions.moduleResolution` (e.g., try 'bundler' or 'node') and ensure `node_modules/@redux-saga/types` is accessible. Upgrading to `redux-saga@1.4.1` or newer might also help if you are on an older version with this issue.

• effects must be plain objects, received [object Promise]

  cause This error occurs when you use `await` or return a Promise directly from a saga without yielding an effect, or if you're not yielding a proper `redux-saga` effect object.
  fix Inside a saga, always `yield` effect creators from `redux-saga/effects` (e.g., `yield call(api.fetchData)` or `yield put({ type: 'ACTION' })`). Do not use `await` directly; use `yield call` for promise-based functions.

Warnings

• breaking The `exports` field was added to `package.json` in v1.4.0. This change restricts what files can be directly imported from the package. While public APIs are maintained, any prior deep imports to non-public files might break.
  Fix: Ensure all imports are from the official public entry points (e.g., `redux-saga` or `redux-saga/effects`). Avoid importing directly from deep paths like `redux-saga/lib/utils/someInternalFile`.
• gotcha When using TypeScript, incorrect `moduleResolution` settings in `tsconfig.json` (e.g., 'bundler' or 'node') can lead to type compatibility issues, especially with older versions or specific bundler configurations.
  Fix: For `redux-saga@1.4.1+`, ensure `moduleResolution` is set appropriately, typically to `bundler` or `node`. If issues persist, review the `redux-saga` GitHub issues for specific `tsconfig.json` recommendations for your setup.
• breaking Prior to v1.0.0, the API for `createSagaMiddleware` and effect creators had different signatures and argument orders. Migrating from older `0.x` versions requires careful review of the migration guide.
  Fix: Consult the official `redux-saga` migration guide for detailed steps and breaking changes when upgrading from `0.x` to `1.x`.
• gotcha Using `sagaMiddleware.run()` multiple times with the same saga instance can lead to unintended behavior, as the saga will be started again. It's typically meant to be called once per root saga.
  Fix: Ensure `sagaMiddleware.run(rootSaga)` is called only once when initializing your application. If you need to restart or hot-reload sagas, consider using `sagaMiddleware.run(saga, ...args).toPromise()` to manage saga lifecycle.

Install

• npm install redux-saga npm
• yarn add redux-saga yarn
• pnpm add redux-saga pnpm

Imports

• createSagaMiddleware
  wrong:

  import { createSagaMiddleware } from 'redux-saga';

  correct:

  import createSagaMiddleware from 'redux-saga';

  This is the default export of the main `redux-saga` package.
• takeEvery
  wrong:

  import { takeEvery } from 'redux-saga';

  correct:

  import { takeEvery, put, call } from 'redux-saga/effects';

  Effect creators like `takeEvery`, `put`, `call`, `all` are imported from the `redux-saga/effects` submodule, not the main package.
• Saga
  wrong:

  import { Saga } from 'redux-saga';

  correct:

  import type { Saga } from 'redux-saga';

  TypeScript types should be imported using `import type` for clarity and to avoid runtime issues if the type name clashes with a value.

Quickstart

This quickstart sets up a basic Redux store with `redux-saga` middleware. It demonstrates defining a simple counter reducer, creating an asynchronous saga using generator functions and effect creators (`call`, `put`, `takeEvery`), and running the saga with `sagaMiddleware.run()`.

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { takeEvery, put, call } from 'redux-saga/effects';

// Reducer
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// Sagas
function* incrementAsync() {
  yield call(delay, 1000); // Simulate an async operation
  yield put({ type: 'INCREMENT' });
}

function* delay(ms) {
  return new Promise(res => setTimeout(res, ms));
}

function* rootSaga() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync);
}

// Create saga middleware
const sagaMiddleware = createSagaMiddleware();

// Create Redux store
const store = createStore(
  counterReducer,
  applyMiddleware(sagaMiddleware)
);

// Run sagas
sagaMiddleware.run(rootSaga);

// Dispatch actions
store.dispatch({ type: 'INCREMENT_ASYNC' });
store.dispatch({ type: 'INCREMENT' });

// Log state changes
store.subscribe(() => console.log(store.getState()));