typed-redux-saga

You can install typed-redux-saga using either yarn or npm. This package requires TypeScript 3.6 or later.

# yarn
yarn add typed-redux-saga

# npm
npm install typed-redux-saga

To avoid the runtime overhead of typed-redux-saga proxies, you can use the built-in Babel macro. This transforms your typed effects into raw redux-saga effects at compile time.

1. Install babel-plugin-macros:

   yarn add --dev babel-plugin-macros

2. Import effects from typed-redux-saga/macro instead of the main entry point.

Example:

import {call, race} from "typed-redux-saga/macro";

function* myEffect() {
  yield* call(() => "foo");
}

This will be transpiled to standard redux-saga code during build.

import {call, race} from "typed-redux-saga/macro";

// And use the library normally
function* myEffect() {
  yield* call(() => "foo");
}

To get strong types for your saga effects, follow these two steps:

1. Import effects (like call, all, race, etc.) from typed-redux-saga instead of redux-saga/effects.
2. Replace yield with yield* when calling these effects.

This ensures that the result of the effect has the correct type (e.g., the return type of the function being called) instead of any.

import { call, all } from "typed-redux-saga";
import Api from "...";

function* fetchUser(action) {
  // `user` now has type User, not any!
  const user = yield* call(Api.fetchUser, action.payload.userId);
  ...
}

function* fetchConfig() {
  // `result` now has type {api1: Config1, api2: Config2}
  const result = yield* all({
    api1: call(Api.fetchConfig1),
    api2: call(Api.fetchConfig2),
  });
  ...
}

The typed-redux-saga package provides typed versions of standard redux-saga/effects. These functions are generator functions that wrap the original effects, allowing for better type safety when using TypeScript in your sagas.

Instead of importing effects directly from redux-saga/effects, import them from typed-redux-saga to ensure that action types, payloads, and return values are correctly typed within your generator functions.

The following effects are exported from typed-redux-saga as generator functions, wrapping their redux-saga/effects counterparts:

• take / takeMaybe / takeEvery / takeLatest / takeLeading (Action listening)
• put / putResolve (Action dispatching)
• call / apply / cps (Function execution)
• fork / spawn / join / cancel (Task management)
• select (State selection)
• actionChannel / flush (Channel management)
• cancelled (Cancellation detection)
• setContext / getContext (Context management)
• delay / throttle / debounce / retry (Timing and flow control)
• all / race (Combinators)