Have ideas to improve npm?Join in the discussion! »

    typed-redux-saga
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    Typed Redux Saga

    npm Build Status Type Coverage

    dependencies Status devDependencies Status peerDependencies Status

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

    Requires TypeScript 3.6 or later.

    Installation

    # 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

    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

    // 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 that will take care of transforming all your effects to raw redux-saga effects.

    Install the babel macros plugin:

    yarn add --dev babel-plugin-macros

    Modify your import names to use the macro:

    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:

    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.

    Credits

    Thanks to all the contributors and especially thanks to @gilbsgilbs for his huge contribution.

    See Also

    Install

    npm i typed-redux-saga

    DownloadsWeekly Downloads

    17,980

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    66.8 kB

    Total Files

    41

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar