Typed Redux Saga

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

Requires TypeScript 3.6 or later.

Installation

1# yarn
2yarn add typed-redux-saga
3
4# npm
5npm install typed-redux-saga

Usage

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

Before

1import { call, all } from "redux-saga/effects";
2// Let's assume Api.fetchUser() returns Promise<User>
3// Api.fetchConfig1/fetchConfig2 returns Promise<Config1>, Promise<Config2>
4import Api from "...";
5
6function* fetchUser(action) {
7  // `user` has type any
8  const user = yield call(Api.fetchUser, action.payload.userId);
9  ...
10}
11
12function* fetchConfig() {}
13  // `result` has type any
14  const result = yield all({
15    api1: call(Api.fetchConfig1),
16    api2: call(Api.fetchConfig2),
17  });
18  ...
19}

After

1// Note we import `call` from typed-redux-saga
2import { call, all } from "typed-redux-saga";
3// Let's assume Api.fetchUser() returns Promise<User>
4// Api.fetchConfig1/fetchConfig2 returns Promise<Config1>, Promise<Config2>
5import Api from "...";
6
7function* fetchUser(action) {
8  // Note yield is replaced with yield*
9  // `user` now has type User, not any!
10  const user = yield* call(Api.fetchUser, action.payload.userId);
11  ...
12}
13
14function* fetchConfig() {}
15  // Note yield is replaced with yield*
16  // `result` now has type {api1: Config1, api2: Config2}
17  const result = yield* all({
18    api1: call(Api.fetchConfig1),
19    api2: call(Api.fetchConfig2),
20  });
21  ...
22}

Babel Macro

You can use the built-in babel macro that will take care of transforming all your effects to raw redux-saga effects.

Install the babel macros plugin:

1yarn add --dev babel-plugin-macros

Modify your import names to use the macro:

1import {call, race} from "typed-redux-saga/macro";
2
3// And use the library normally
4function* myEffect() {
5  yield* call(() => "foo");
6}

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

1import {call, race} from "redux-saga/effects";
2
3function* myEffect() {
4  yield call(() => 'foo');
5}

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 and especially thanks to @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