Hey,

I have the need to enable/disable a preloader on all saga calls, after a while I found the following solution for takeEvery/takeLatest in Typescript.

import {
  put,
  takeLatest as upstreamTakeLatest,
  SagaGenerator,
  takeEvery as upstreamTakeEvery,
} from "typed-redux-saga";
import { ActionPattern, ForkEffect } from "redux-saga/effects";
import { ActionMatchingPattern } from "@redux-saga/types";
import { ConfigModule } from "../..";

export const workerWrapper = <P extends ActionPattern>(
  type: P,
  worker: (action: ActionMatchingPattern<P>) => any
): ((action: ActionMatchingPattern<P>) => any) =>
  function* wrapped(action: ActionMatchingPattern<P>): any {
    yield* put(ConfigModule.actions.setPreloader(true));
    try {
      // Call the worker / wrapped action
      yield* worker(action);
    } finally {
      yield* put(ConfigModule.actions.setPreloader(false));
    }
  };

export function takeLatest<P extends ActionPattern>(
  pattern: P,
  worker: (action: ActionMatchingPattern<P>) => any
): SagaGenerator<never, ForkEffect<never>> {
  return upstreamTakeLatest(pattern, workerWrapper(pattern, worker));
}

export function takeEvery<P extends ActionPattern>(
  pattern: P,
  worker: (action: ActionMatchingPattern<P>) => any
): SagaGenerator<never, ForkEffect<never>> {
  return upstreamTakeEvery(pattern, workerWrapper(pattern, worker));
}

I'm posting here with the hope it helps someone else.

Kind regards,
René

const { d1, d2  } = yield* all({
    d1: call(fetchD1, options),
    d2: call(fetchD2, options),
  });

I've had sitatuions where the above example fetchD1 and fetchD2 are both other sagas that I am calling with call but fetchD1 infers the correct type ({ from: string; to: string; featureName: string | undefined; name: string; data: MeasurementCharacteristicPresentation[]; }) and fetchD2 infers,

Generator<SelectEffect | AllEffect<SagaGenerator<{
    from: string;
    to: string;
    featureName: string | undefined;
    name: string;
    data: MeasurementCharacteristicPresentation[];
}, CallEffect<...>>>

The difference between the two sagas return,

fetchD1

return yield* call(
    (from, to, take, machineId) =>
      client.fetchD1Data.unique({
        query: {
          from,
          to,
          take,
          machineId
        }
      }).promise,
    from,
    to,
    constants.maxTake,
    machineId
  );

fetchD2

return yield* all(
    items.map(({  name }) =>
      call(fetchD2Data, { from, to,  name })
    )
  );

Great product, finally making redux saga typesafe 😀

It appears to me that try / catch error handling does not work. Is that right? I have this scenario:

// saga function:
try {
  const result = yield* callBackend();
  yield* put(success());
} catch {
  yield* put(error());
}

// callBackend:
return yield* call(function_that_uses_fetch)

The function that uses fetch throws an error, but it is not caught in the catch clause.
Is it possible to make this work?

the type definitions in redux-saga itself contains a lot of nice documentation (for example) which vscode and other editors show on hover -- it would be nice to copy it over into these type definitions.

If i remember when i have time, i'll submit a pr, probably with a script to copy it over too.

Hello!
I've run into an issue with returned type of join effect. In typed-redux-saga in all cases effect join returns void . In my situation I am using spawn effect in this way -
const test = yield* spawn(someFunction);
test receives type witch is returned by someFunction. Then I am using join effect like this -
const testJoin = yield* join(test);
and do expect that variable testJoin will receive type of test but it comes as void.
Is it an error or it is correct?
Is it possible that it's fixed in the way that join returns type of task given to it?

import { select } from 'typed-redux-saga/macro';

const getToken = (state: RootState) => state.user.account?.token; // type: (...) => string | undefined

function* fetchAlertsSaga() {
  const token = yield select(getToken); 
  // TypeScript error here 
  // TS7057: 'yield' expression implicitly results in an 'any' type because 
  //   its containing generator lacks a return-type annotation.
  // ...
}

babel-plugin-macros is installed via react-scripts dependencies:

@...
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] deduped
└─┬ [email protected]
  └── [email protected]

What I do wrong? Should I configure macro somehow?

If I switch import of typed-redux-saga/macro to the typed-redux-saga and add '*' to the yields, the correct type is inferred:

  const token = yield* select(getToken);  // string | undefined

Tested with
TS: 3.7.2
typed-redux-saga: 1.0.6

How to reproduce?

import { select, call } from 'typed-redux-saga';


function someApiCall(): number {
	return 1;
}
function someSelect(): number {
	return 1;
}

export function* doStuff() {
	const result = yield* call(someApiCall)
	
	// variable `result` is still any
	result.lol();


	const selectResult = yield* select(someSelect)

	// gives error as expected
	selectResult.lol();
}

As you can see from the example code the the select effect infers correct type but call does not. Where is the problem? 🤔

Hi everyone! I have just bumped into the situation:

import { call } from "typed-redux-saga";

type Product = {
    id: number;
    name: string;
}

type ProductExtended = Product & {
    weight: number;
}

export function normalizeProduct<T extends Partial<Product>>(product: T): T {
    const { name = '' } = product;

    return {
        ...product,
        name: name.trim(),
    };
}

function* saga(productExtended: ProductExtended) {
    const productExtendedNormalized = yield* call(normalizeProduct, productExtended);
    // productExtendedNormalized is now of type 'unknown', but expected type is 'ProductExtended'
}

dispatching action with payload, produces this typescript error: Argument of type 'string' is not assignable to parameter of type 'TakeableChannel'.
.

export default function* watchAuth() {
yield* takeLatest(startAuth.toString(), handleAuthUser); // Argument of type 'string' is not assignable to parameter of type 'TakeableChannel'.
}

using:
"@reduxjs/toolkit": "^1.8.5",
"typed-redux-saga": "^1.5.0",

I assumed Take would verify that a string passed as the first argument would match a known type in the generic argument?

E.g.

type Action = { type: 'my action' }

yield* take<Action>('my actionzzzz', ...)

I expect an error that 'my actionzzzz' is not comparable to 'my action'? Am I using take incorrectly?

TS version 4.5.3

From #10 (comment) :

I feel like it's unconvenient for the race and all yield* effects to take raw redux-saga's effects. Is it possible and/or desirable to pass yield* effects to them? If so, it would be quite easy to add a simple linter rule that bans redux-saga/import. I would kind of like that. WDYT?

We're currently in the process of moving the code-base of one of our projects to typed-redux-saga.

I've written an eslint plugin, with an auto-fix option to help with that:
https://www.npmjs.com/package/@jambit/eslint-plugin-typed-redux-saga

Since this is my very first eslint plugin, it might not be stable for every use-case, but it worked for the biggest of the projects we wanted to convert.

I've updated to typed-redux-saga recently. Prior to this I was using redux-saga.

Saga middleware create with redux-saga looks as follows

import { applyMiddleware, compose, createStore } from "redux";

import createSagaMiddleware from "redux-saga";
import rootReducer from "../reducer";
import rootSaga from "../sagas";

declare global {
  interface window {
    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
  }
}
const reduxDevTools =
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  reduxDevTools(applyMiddleware(sagaMiddleware))
);

sagaMiddleware.run(rootSaga);

export default store;

My question is do I still need to use above way of creating saga middleware from redux-saga or it should be from typed-redux-saga?

Hello.
Could you, please, help to solve the issue. Why is type is unknown with Axios?
Thank you

In the non-generic forms of take & select we set the generator return type to any. I'm inclined to replace this with unknown. This would be a breaking change but I think we can get away with it while this lib is still crystalizing.

What do you think @gilbsgilbs ?

Replace the unknowns in typings/types.d.ts with actual types.

Bonus points for pushing upstream to babel or to DefinitelyTyped.

Cloning #248 to a new issue because #248 got repurposed. :P

Note these paths from tsconfig.json:

    "baseUrl": ".",
    "paths": {
      "typed-redux-saga": ["."],
      "typed-redux-saga/macro": ["./macro"]
    }

It seems like eslint-plugin-import doesn't understand these, so for example tsc is happy with this import, but eslint-plugin-import believes that it is unresolved:

// eslint-disable-next-line import/no-unresolved
import * as Effects from "typed-redux-saga/macro";

We should confirm we're not doing anything wrong and--assuming we aren't--create an issue upstream.

We might need this: https://github.com/benmosher/eslint-plugin-import#typescript

redux-saga allows just yielding a promise without a call effect, like

function* mySaga() {
  yield Promise.resolve()
}

although this example could be wrapped in a call, there are some obscure use cases for this.

I'd suggest, defining a resolve function/macro, which the macro transform just deletes. The typing would be like

export function resolve<P>(
  promise: P,
): SagaGenerator<P extends Promise<infer RT> ? RT : P, never>

if this would be a welcome change and i remember and/or the need becomes more pressing, i'll submit a PR. (yes i know i've said that before 😛 )

Thank you for this great library!

Does anyone know how to type the following saga call

// React View component equivalent

    apolloClient.query<GetAppVersionQuery>({query: getAppVersion, variables: { platform: Platform.IOS }}).then(res => {
      console.log(res)  // res is type GetAppVersionQuery
    })

In typed-redux-saga

    const { query } = apolloClient
    const response = yield* call(query, { query: getAppVersion, variables: { platform: Platform.IOS }})
    // response is type any, how to set return type to GetAppVersionQuery?

The original query has the type of
const query: <T=any, TVariables=Record<string, any>>(options: QueryOptions<TVariables, T>) => Promise<ApolloQueryResult<T>>

Thank you

Somehow I think I'm breaking typed-redux-saga's return type inference here

https://codesandbox.io/s/confident-sunset-62kgs?file=/src/index.ts:1307-1358

Is this a mistake on my side or a bug?

I've been using https://github.com/jfairbank/redux-saga-test-plan extensively in a project for easier testing purposes. Seems that typed-redux-saga breaks our tests since the API doesn't work with generator delegation.

Are there any solutions available?

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

const getString = () => 'a string'

function* exampleSaga() {
  const someString = yield* call(getString)
}

In vscode, I get an error that --downlevelIteration needs to be enabled. Is this a required option for this package? Or is something wrong in my setup?

Thanks for this code, it's a real help to get better types in saga. I see they're looking to merge it into the saga repo also. Neat.

do you have an idea on how to get safely typed generators that are under the all effect?

all assumes a shared type between arguments, causing the type inference to devolve to any for types that don't share a more refined base type.

Promise.all handles this well, if via a bit of a hack:
all<T1, T2>(values: readonly [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>]): Promise<[T1, T2]>;

I believe typed-redux-saga could do something similar -

export type All<
    T1 extends (...args: any[]) => any,
    T2 extends (...args: any[]) => any
> =
    (toRun: [SagaGenerator<SagaReturnType<T1>>, SagaGenerator<SagaReturnType<T2>>])
    => SagaGenerator<[SagaReturnType<T1>, SagaReturnType<T2>]>

essentially it'd be nice if all just converted from [generator<T>, generator<T1>,...etc] into generator<[T, T1]>

I'd like to submit a PR for this, however I'm having trouble understanding the original signature for all - specifically the second argument for the returned SagaGenerator<EffectReturnType<T>[], AllEffect<T>>. What is that second parameter for? I imagine it will need to change (perhaps in redux-saga) to support this.

Hey, I'm working on a PR, but I wanted to run this by you first; the Take effect also has a variant that works with channels. It's fairly trivial to add this to typed-redux-saga's implementation, but since typescript doesn't support generator overloading I had to change it to a function with an IIGE (immediately invoked generator expression :).

export function take<A extends Action>(
  channel: Channel<A>,
  pattern: ActionPattern<A>,
): SagaIterator<A>;
export function take<A extends Action>(
  pattern?: ActionPattern<A>,
): SagaIterator<A>;
export function take<A extends Action>(a?: any, b?: any): SagaIterator<A> {
  return (function*() {
    if (a.take) {
      return yield rawTake(a, b);
    } else {
      return yield rawTake(b);
    }
  })();
}

This changes the type of the export, but not the signature. It's also possible to keep the generator and avoid the overload, but it's really ugly. Are you cool with using a function for the top level export, and if so, should the rest of the exports use the same pattern? In practice, it doesn't change the developer ergonomics re: intellisense.

is there any possibility of adding support for the getContext() effect?

Hello!

I have watchers function

import {takeEvery,takeLatest} from 'typed-redux-saga'

export function* watchSmsTemplatesSagas() {
  yield takeEvery(smsTemplatesActions.startInit.type, handlerInit);
  yield takeLatest(smsTemplatesActions.delete.type, handlerDeleteSmsTemplate);
  yield takeLatest(smsTemplatesActions.submitForm.type, handlerFormSubmit);
  yield takeLatest(smsTemplatesActions.changeValidSymbols.type, handlerChangeValidSymbols);
}

All the effects which was written after the takeEvery don't work.

But!

1. If I use only takeEvery from @redux-saga/core/effects all work good

import {takeLatest} from 'typed-redux-saga';
import {takeEvery} from '@redux-saga/core/effects';

export function* watchSmsTemplatesSagas() {
  yield takeEvery(smsTemplatesActions.startInit.type, handlerInit);
  yield takeLatest(smsTemplatesActions.delete.type, handlerDeleteSmsTemplate);
  yield takeLatest(smsTemplatesActions.submitForm.type, handlerFormSubmit);
  yield takeLatest(smsTemplatesActions.changeValidSymbols.type, handlerChangeValidSymbols);
}

2. if I use all effects from typed-redux-saga with * all work good too

import {takeLatest, takeEvery} from 'typed-redux-saga';

export function* watchSmsTemplatesSagas() {
  yield* takeEvery(smsTemplatesActions.startInit.type, handlerInit);
  yield* takeLatest(smsTemplatesActions.delete.type, handlerDeleteSmsTemplate);
  yield* takeLatest(smsTemplatesActions.submitForm.type, handlerFormSubmit);
  yield* takeLatest(smsTemplatesActions.changeValidSymbols.type, handlerChangeValidSymbols);
}

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency eslint to v9
• Update dependency eslint-plugin-functional to v6
• Update dependency eslint-plugin-prettier to v5
• Update dependency prettier to v3
• Update dependency rimraf to v5
• Update dependency rollup to v4
• Update dependency typescript to v5
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency nunjucks to v3.2.4 [SECURITY]
• Update dependency @types/babel-plugin-macros to v3
• Update dependency @types/fs-extra to v11
• Update dependency @types/node to v20
• Update dependency babel-plugin-tester to v11
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-config-typed-fp to v5
• Update dependency eslint-import-resolver-typescript to v3
• Update dependency eslint-plugin-total-functions to v7
• Update dependency jest to v29
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

in redux the effect select can be called without an argument to get the full state
https://redux-saga.js.org/docs/api/#selectselector-args

If you call it without an argument in typed-redux-saga though it comes back as an any type

say this was the state

{
   user: {
      name: 'foo'
   }
}

const {user} = yield* select();

user will come back with an any type so something like user.email won't cause a TS error

I think that this may be hard to implement but there should at least be an note in the README warning about it

Anyone using esbuild/esbuild-loader know a workaround for the macro issue? I guess you could get it working with babel-loader for the sagas and esbuild-loader for the rest.

I would like to conditionally add an effect to the object used by an all effect. The type comes out as unknown when in reality it should be AxiosResponse | undefined.

Since this library is very simple wrapper could you make PR about these changes to redux-saga it self so everyone would have these wonderful benefits? :)

Hi. I created a script that converts redux-saga code to typed-redux-saga.
I'm wondering if it could be included in this rep so that people can migrate existing code to typed-redux-saga by just running one command?

https://gist.github.com/javascripter/746b1b1eb76dd088dfb75df0c7e0c8dd

If it's not of your interest please feel free to close this issue. Thanks.

As per the docs for takeMaybe, when called on a Channel, it can return END.

Hello, and thanks for this library that solved a long issue of mine with redux-saga. I
would like to suggest improved typing for effects that yield actions, i.e. take.

const action = yield* take("ADD_FOO");
// inferred type of action is Action<any>

With an expression like above, the inferred type for action is very imprecise. If
we want to safely use meta or payload of the action in the saga, we must still assert its type. Some
libraries like redux-toolkit and typesafe-actions suggest precisely typing action
creators and using them to power generic type inference in e.g. reducers. This could also
be done with redux-sagas, using the workaround of this package. I'm suggesting adding a
typesafe take effect that take an action creator instead of the action type, as below:

export function typedTake<AC extends (...args: any[]) => any>(
  pattern?: AC
): SagaGenerator<ReturnType<AC>, never>;
export function* typedTake(args: any) {
  return yield rawTake(args.type);  // uses redux-toolkit actions
}

const addTodo = createAction<string>("ADD_TODO");
// from redux-toolkit; addTodo('some text').payload has type string
// and the type is attached as addTodo.type
function* todoSaga() {
  const action = yield* typedTake(addTodo);
  // type correctly inferred
}

The above is not specific to any kind of action creator except that type attribute of
action is passed to rawTake. Overloading take from this library is not possible because
redux-saga already interprets a function argument as a filter. The above can be extended
to arrays of action creators to mirror redux-saga.

I am happy to hear any thoughts.

Consider when the take effect is passed a string and an action type param, like this:

  type FooAction = {type: "FOO"};
  yield* Effects.take<FooAction>("FOO"); // $ExpectType FooAction

In cases like this we should be able to constrain the passed string to "FOO" | "*", giving some extra type safety.

See https://redux-saga.js.org/docs/api/#takepattern

Hi,

I added a PR with two examples of cases that started failing for us when trying to apply the update: #675

The smallest case looks like this:

  function handleArgumentThatIsPartOfUnion(requestId: 27 | 28) {
    return 22;
  }
  yield* Effects.call(handleArgumentThatIsPartOfUnion, 27);

This code works in 1.4 but in 1.5 the argument to the function called (27) gets interpreted as number (instead of that specific number it seems?)

Has anyone else had this problem? ideas to fix it?

hi, didn't find eventChannel in your package. Can something be used instead?

Note these paths from tsconfig.json:

    "baseUrl": ".",
    "paths": {
      "typed-redux-saga": ["."],
      "typed-redux-saga/macro": ["./macro"],
      "typed-redux-saga/effects-for-action-type": ["./effects-for-action-type"]
    }

It seems like eslint doesn't understand these, so for example tsc is happy with this, but eslint isn't:

import * as Effects from "typed-redux-saga/macro";

Relative code

Please consider the following code snippet as you read through the issue below

import { call, put, takeLatest } from 'typed-redux-saga';

function* initialLoad() {
  ...
}

function* logout() {
  ....
}

export function* authSaga() {
  yield takeLatest(actions.logout.type, logout);
  yield takeLatest(actions.initialLoadStart.type, initialLoad);
}

Issue

When using the typed-redux-saga version of takeLatest, on the first seems to be registering properly; when calling initialLoadStart, the action is dispatched, but initialLoad is never called.

Expected result

When using the same code, but using takeLatest from redux-saga/effects both sagas get registered and are invoked when the event is dispatched

Firstly, massive thanks for this library. As I start my journey into the saga wildnerness, being able to trust the types I get back is a HUGE win. Really appreciate this library.

I'm also using redux-saga-promise-actions so that I can await sagas from within other sagas. In my adventures there, I've started to suspect that the type definitions for put and putResolve should be different, but they appear to be the same.

In VSCode when I try const result = yield* putResolve(action()) I get the type of result as the return type of action. The same for put() instead of putResolve(). But putResolve() should be the return type of store.dispatch(action()) I think.

I've tried playing around with the types to see if I can figure out the fix, but unfortunately I'm stumped, my TypeScript fu is insufficient to the task.

Redux Action:

export const getUsers = () => {
  return {
    type: GET_USERS_REQUEST,
  };
};

API Request:

export const getUsers = () => {
  return API(GET_USERS, {
    method: "GET",
  });
};

Saga:

function* callGetUsers() {
  try {
    const result = yield* getUsers();
    const { status, data } = result;
    if (status === 200) {
      yield* put({ type: GET_USERS_SUCCESS, payload: data });
    }
  } catch (err) {
    yield* put({
      type: GET_USERS_FAILED,
      payload: err.response.data,
    });
  }
}

export function* watchGetUsers() {
  yield* takeLatest(GET_USERS_REQUEST, callGetUsers);
}

Saga:

yield* fork(watchGetUsers);

After upgrading to typed-redux-saga its not making API call. Am I missing anything here?

Hi,
First of all, thank you for this great library, it helped me improve the typing and quality of my codebase a lot !
But still do have some question about how to properly test saga that uses typed-redux-saga instead of regular redux-saga.

Let's consider this saga

import * as untypedReduxSaga from "redux-saga/effects";

export async function randomPromise(): Promise<number>{
    return 42;
}

export function* untypedTodosSaga(){
    const {p1} = yield untypedReduxSaga.all({
        p1: untypedReduxSaga.call(randomPromise),
    })
    return p1;
}

We can test it pretty easily using this test ( And the test passes ✅ )

import * as untypedReduxSaga from "redux-saga/effects";
import {randomPromise, untypedTodosSaga} from "./todosSaga";

test('regular redux saga', ()=>{
    const gen = untypedTodosSaga();
    expect(gen.next().value).toEqual(untypedReduxSaga.all({
            p1: untypedReduxSaga.call(randomPromise),
        })
    );
    expect(gen.next({p1: 44}).value).toEqual(44);
})

But if the original codebase we replace regular redux-saga) (untypedReduxSaga) by the typed version the test fail 🟥

import * as typedReduxSaga from "typed-redux-saga";

export async function randomPromise(): Promise<number>{
    return 42;
}

export function* typedTodosSaga(){
    const {p1} = yield* typedReduxSaga.all({
        p1: typedReduxSaga.call(randomPromise),
    })
    return p1;
}

- Expected  - 10
+ Received  +  1

  Object {
    "@@redux-saga/IO": true,
    "combinator": true,
    "payload": Object {
-     "p1": Object {
-       "@@redux-saga/IO": true,
-       "combinator": false,
-       "payload": Object {
-         "args": Array [],
-         "context": null,
-         "fn": [Function randomPromise],
-       },
-       "type": "CALL",
-     },
+     "p1": Object {},
    },
    "type": "ALL",
  }

And the reason behind is that the yield* actually "unwrap" the all combinator, and therefore returns the actual JSON payload of the effect, but the nested call function itself remains a generator around the "real" redux-saga call.

Meaning that we can actually test that the all effect has been yield but we can't check the content of this all effect, greatly degrading the interest of our test.

We can't update the code to unwrap the call effect by hand without losing types inference.

export function* typedTodosSaga(){
    const {p1} = yield* typedReduxSaga.all({
        p1: typedReduxSaga.call(randomPromise).next().value, // 🟥  p1 => unknown
    })
    return p1;
}

Workaround

The workaround I use for now is to manually "unwrap" the effect if it is a combinatorEffect (cf: all | race) using the following function.

import type {CombinatorEffect, CombinatorEffectDescriptor, Effect} from '@redux-saga/types';
import {SagaGenerator} from "typed-redux-saga";

import {map} from 'ramda';

function isCombinatorEffect<T = any, P = any>(
    effect: Effect<T, P | CombinatorEffectDescriptor<P>> | unknown,
): effect is CombinatorEffect<T, P> {
    return (effect as Effect<T, P | CombinatorEffectDescriptor<P>>).combinator;
}

export function unwrapCombinators<E extends Effect<T, P> | unknown, T, P extends SagaGenerator<any> | any>(step: E): E {
    const mapper = (value: P) => {
        if (typeof (value as SagaGenerator<any>).next === 'function') {
            return (value as SagaGenerator<any>).next().value;
        } else {
            return value;
        }
    };
    if (isCombinatorEffect(step)) {
        // @ts-ignore honestly this is way to complex to type this :/
        const newPayload = map(mapper, step.payload);

        return {...step, payload: newPayload};
    } else {
        return step;
    }
}

My test now looks like this, and passes ✅ , and the saga is still correctly typed.

test('typed redux saga (using unwrapCombinator)', ()=>{
    const gen = typedTodosSaga();
    expect(unwrapCombinators(gen.next().value)).toEqual(untypedReduxSaga.all({
            p1: untypedReduxSaga.call(randomPromise),
        })
    );
    expect(gen.next({p1: 44}).value).toEqual(44);
})

Suggestions

• Maybe the combinators effect can always recursively unwrap nested effects
• Or, this library can provide a helper function like unwrapCombinators to help deal with it
• Or provide/document a better alternative

For some reason TypeScript always infers the result of call as "any". Yes, I am importing the call function from typed-redux-saga, not regular redux-saga.

Here is an example usage:

export function* attemptLoginSaga(action: ReturnType<typeof attemptLogin>) { try { const tti = { login() { return new Promise<number>((resolutionFunc, rejectionFunc) => { resolutionFunc(777) }) } } const response = yield* call(tti.login) }

Here is my tsconfig file. I am on create-react-app and typescript 4.2.3:

{ "include": ["src"], "compilerOptions": { "baseUrl": "src", "downlevelIteration": true, "target": "ES6", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": false, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "noImplicitAny": false, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "noFallthroughCasesInSwitch": true } }

In use with some external libraries this seems to be not resolved correctly and causes error.

Above case resulted using https://github.com/ethers-io/ethers.js/ library.

  const signer = yield* call(getSigner)
  const balance = yield* call(signer.getBalance)

getBalance should return BigNumber but instead fails.

Refactoring function into Promise solves this problem.

I am trying to dispatch a thunk action (which is essentially action creator that returns a promise) using the put effect. TypeScript is not able to infer the return type of the put effect.

My particular use case for this is using RTK query (see: https://stackoverflow.com/questions/68761222/manually-trigger-rtk-query-or-mutation-inside-a-redux-saga-task).