# typed-redux-saga

> Redux-Saga effects with strong types.

Latest version **1.5.0** (published 2022-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install typed-redux-saga
pnpm add typed-redux-saga
yarn add typed-redux-saga
bun add typed-redux-saga
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2022-05-30 |
| First published | 2019-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.0.0 |
| Dependencies | 0 |
| Unpacked size | 112.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 319 |
| Maintainers | seandawson, danielnixon, rorystokes, rnlm |
| Keywords | redux-saga, saga, typescript, babel-plugin-macros |

## Links

- npm: https://www.npmjs.com/package/typed-redux-saga
- Repository: https://github.com/agiledigital/typed-redux-saga
- Issues: https://github.com/agiledigital/typed-redux-saga/issues
- npm.io page: https://npm.io/package/typed-redux-saga

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2022-05-30
- 1.4.0 — 2022-02-20
- 1.3.1 — 2020-10-17
- 1.3.0 — 2020-10-16
- 1.2.0 — 2020-07-30
- 1.1.0 — 2020-07-20
- 1.0.8 — 2020-06-20
- 1.0.7 — 2020-05-22
- 1.0.6 — 2020-01-26
- 1.0.5 — 2020-01-25
- 1.0.4 — 2020-01-25
- 1.0.3 — 2020-01-25
- 1.0.2 — 2020-01-25
- 1.0.1 — 2020-01-25
- 1.0.0 — 2020-01-25
- … 6 more at https://npm.io/package/typed-redux-saga/versions

## README

# Typed Redux Saga

[![npm](https://img.shields.io/npm/v/typed-redux-saga.svg)](https://www.npmjs.com/package/typed-redux-saga)
[![Build Status](https://travis-ci.org/agiledigital/typed-redux-saga.svg?branch=master)](https://travis-ci.org/agiledigital/typed-redux-saga)
[![Type Coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fagiledigital%2Ftyped-redux-saga%2Fmaster%2Fpackage.json)](https://github.com/plantain-00/type-coverage)
[![codecov](https://codecov.io/gh/agiledigital/typed-redux-saga/branch/master/graph/badge.svg?token=ZNTWQNDKL8)](https://codecov.io/gh/agiledigital/typed-redux-saga)

An attempt to bring better TypeScript typing to redux-saga.

Requires TypeScript 3.6 or later.

## Installation

```sh
# yarn
yarn add typed-redux-saga

# npm
npm install typed-redux-saga
```

## Usage

Let's take the example from https://redux-saga.js.org/#sagasjs

### Before

```typescript
import { call, all } from "redux-saga/effects";
// Let's assume Api.fetchUser() returns Promise<User>
// Api.fetchConfig1/fetchConfig2 returns Promise<Config1>, Promise<Config2>
import Api from "...";

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

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

### After

```typescript
// Note we import `call` from typed-redux-saga
import { call, all } from "typed-redux-saga";
// Let's assume Api.fetchUser() returns Promise<User>
// Api.fetchConfig1/fetchConfig2 returns Promise<Config1>, Promise<Config2>
import Api from "...";

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

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

## Babel Macro

You can use the built-in [babel macro](
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md)
that will take care of transforming all your effects to raw redux-saga effects.

Install the babel macros plugin:

```sh
yarn add --dev babel-plugin-macros
```

Modify your import names to use the macro:

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

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

The previous code will be transpiled at compile time to raw redux-saga effects:

```js
import {call, race} from "redux-saga/effects";

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

This gives you all the benefits of strong types during development without
the overhead induced by all the calls to `typed-redux-saga`'s proxies.

## ESLint Rules

In order to avoid accidentally importing the original effects instead of the typed effects, you can use this ESLint plugin:
https://github.com/jambit/eslint-plugin-typed-redux-saga

It includes an auto-fix option, so you can use it to easily convert your codebase from redux-saga to typed-redux-saga!

## Credits

Thanks to all the [contributors](https://github.com/agiledigital/typed-redux-saga/graphs/contributors) and especially thanks to [@gilbsgilbs](https://github.com/gilbsgilbs) for his huge contribution.

## See Also

* https://github.com/danielnixon/eslint-config-typed-fp
* https://github.com/danielnixon/eslint-plugin-total-functions
* https://github.com/danielnixon/readonly-types
* https://github.com/jonaskello/eslint-plugin-functional
* https://github.com/gcanti/fp-ts
* https://github.com/plantain-00/type-coverage

---
_Source: https://npm.io/package/typed-redux-saga · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._