Code Monkey home page Code Monkey logo

typed-redux-saga's Introduction

Typed Redux Saga

npm Build Status Type Coverage codecov Snyk Vulnerabilities for GitHub Repo

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.

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

typed-redux-saga's People

Contributors

danielnixon avatar dependabot-preview[bot] avatar gilbsgilbs avatar renovate-bot avatar dependabot[bot] avatar dloehr avatar jaulz avatar martynaskadisa avatar santojambit avatar vadimkorobka avatar dionshihk avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.