Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 14:20
    zfeed commented #907
  • 14:18
    zfeed commented #907
  • 14:18
    zfeed commented #907
  • 14:09
    zfeed commented #907
  • 14:04
    zfeed commented #907
  • 14:02
    zfeed commented #907
  • 14:02
    zfeed commented #907
  • 14:01
    zfeed commented #907
  • 14:00
    zfeed commented #907
  • 13:54
    zfeed commented #907
  • 13:53
    zfeed commented #907
  • 13:53
    zfeed commented #907
  • 13:51
    zfeed commented #907
  • 13:51
    zfeed commented #907
  • 13:50
    zfeed commented #907
  • 09:08
    zfeed commented #907
  • 08:26
    Andarist commented #193
  • 01:07
    justinlazaro-iselect commented #193
  • Oct 28 14:45
    hbarcelos closed #2130
  • Oct 28 14:45
    hbarcelos commented #2130
Mateusz Burzyński
@Menci effects can be synchronous, yield call(() => 'foo') works
Phan Dang Dien

I guys, I'm struggling in finding a proper way to use saga in my app. For example I have a fetch action and a notification function to push notification when the fetch action failed or succeeded.

The question is where should I put UI-related logic like notification, confirmation modals, router redirection...? Should I put it right in the saga?

That doesn't seem to be a good choice for me because I want the app logic to be separated from UI logic. That way I can later use my app logic for mobile and other devices and the only thing I need is to rebuild the UI itself. Can someone tell me what is the best practice for saga? Thank you!

A Flores
@phandd Hrm...I think that sagas are mainly for managing async things, I think of it as a place to put my 3rd party interactions(3rd party being another server, my own server, a service of some sort, etc) Usually, I will take that data, and feed it into redux. Redux is piped in to my individual components.
wrt ui related things, if it is self contained within a single component I will actually handle it there. If it were something that had to do that had to communicate over multiple components I might use a saga? but I would probably just modify my store and have the respective components update themselves from redux.
for router redirection, I will usually render a redirection tag based on certain critiria directly in my component.
A Flores
sometimes if I have something that needs to have a timeout before fetching more data, I will put that type of thing in sagas as well
Prateek Chachra
Hello everyone! How do you guys optimize API calls?
My API call takes about 1300 ms at max on postman, but on react native it takes 5 times that time
Dimitri Mitropoulos
hi all!
I'm trying (and failing, hard) to introduce redux-saga into an app that uses typescript (ts-loader via webpack) and babel7. When I try to build I just get:
ERROR in ./node_modules/redux-saga/effects.d.ts
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Debug Failure. Output generation failed
    at PoolWorker.fromErrorObj (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/thread-loader/dist/WorkerPool.js:262:12)
    at Object.transpileModule (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/typescript/lib/typescript.js:116825:29)
    at getTranspilationEmit (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/ts-loader/dist/index.js:283:74)
    at successLoader (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/ts-loader/dist/index.js:66:15)
    at Object.loader (/home/dimitri/src/github.com/weaveworks/wkp-ui/app/ui/node_modules/ts-loader/dist/index.js:22:12)
 @ ./src/store/index.ts 122:16-45
 @ ./src/store/configureStore.ts
 @ ./src/index.tsx
 @ multi ./src/index.tsx webpack-hot-middleware/client?overlay=false
ℹ 「wdm」: Failed to compile.
I've been struggling with this for about 6 hours and I've tried everything under the sun I can think of including:
  • introducing every combination of the babel polyfills, regenerator-transforms, runtimes, etc.
  • testing to make sure generators transpile in my project at all (they do)
  • flipping every option I can think of in my tsconfig
Edoardo Gallo

Hey guys! I'm looking for the best way to manage these sagas

  • classic LOGIN/LOGOUT process but - after login and before logout - i need to manage a websocket connection. For example:


Does the rootSaga need to watch for the WS actions or is it better that the LOGIN/LOGOUT workers handle some logic?

Within the LOGIN/LOGOUT workers i can fork/dispatch the actions to OPEN/CLOSE the websocket. Looking for the best approach in this case.
anyone know this issue
about exception handing
Hi, could you please advise me with following?
I'm loading react app with URL query string arguments. I would like to check if they are valid and fire an API call to fetch app data from server.
I got URL query string params using query-string in componentDidMount() but now I would like to dispatch actions to update state with extracted params and fire an API calls from redux-saga. What's the recommended way to do so?
Katherine Xu
Hi all, would anyone happen to know if there is support for the redux batch() command with Redux saga ( https://react-redux.js.org/api/batch )?
Hi all,
I have a question about redux-saga, here is my problem. When I’m rendering a list on React, I’m dispatching the exact same saga multiple times concurrently for the same API call. I’m wondering if there is a way to tell saga to automatically cancel the duplicates and only call one of them.
Andrew Craswell
Looking for some quick advice. I'm building a generic Saga wrapper at my company to let people connect to an API endpoint, and specify a Saga EffectCreator. As the EffectCreator (takeEvery, takeLatest, etc) process the API method, it assigns a unique Id to each request and tracks it in the store so the component can check the status. This works great for takeEvery, but when 3 components request the same endpoint simultaneously while using takeLeading, the subsequent tasks get ignored. This leaves entries in my Redux store that are still designated as isFetching, and my components think their data is still loading. How can I track (a) which tasks were actually taken, (b) which were ignored, and (c) dispatch an action to tell my component that the request was superseded?
It feels like the only way to accomplish this may be to recreate the EffectCreators and add my own custom handling logic in each, but I really want to avoid that.
Rob Cecil
Hello, what is the Redux Saga pattern for calling streaming APIs ?

Hey guys.. I'm having response is undefined on my request using sagas

export function* getCompanies({ payload }: any) {
  try {
    const { data: response } = yield call(api.get, '/companies-list', {
      params: {
        keyword: payload,
    const { data } = response;
    yield put(handleFetchCompaniesAsync.success(data.companies));
  } catch ({ response }) {
    yield all([

export default function* companySagas() {
  yield takeLatest(handleFetchCompaniesAsync.request, getCompanies);

What could be the problem here?

Jonathan Jacobs
I have an issue with Fast Refresh on React Native, my sagas are started multiple times and in particular I have several eventChannels that are never closed. I've read redux-saga/redux-saga#1961 but I don't think helps me figure out how to properly close my channels. The pattern I'm using here is something like this:
const channel = eventChannel(…) // Unsubscribe is returned etc.
yield takeEvery(channel, process)
I'm not sure what I have to do to know when to close the channel. takeEvery returns a task (and is non-blocking) so I would need some way to say "wait until this saga is cancelled, and then close the channel" but I don't know how to express that.
Jonathan Jacobs
I've come up with the following method for a single takeEvery:
const channel = …
try {
  const task = yield takeEvery()
  yield join(task)
} finally {
  if (yield cancelled()) {
I don't know if this is silly, or if there's a better way but I can't see another way to ensure my generator function doesn't finish (i.e. run out of things to yield) and leave me with no way to detect cancellation. This seems like it would be a fairly common issue though, maybe I'm just searching for the wrong thing?
Is this a real pattern or is this an anti-pattern? yield all([takeEvery(…), takeEvery(…), takeEvery(…)])
lieut z
@dimitropoulos Hi, I have the same problems. What's your solution?
Guy, need some help. I want to use 'useApolloClient' in saga context, how can I do that? Any recommendation? I trying to create saga middle or redux middle to use setContext but not working as I expected.
Henrique Barcelos

Hey guys, I have a more of a conceptual problem I've been struggling with in the past couple of days.

I have to subscribe to N event streams and react to the events occurring in them. Those are standard Node-like event-emitters.
I also have a facade API which should merge those N event streams together into a single one.
My initial thought was to convert the subscription into an async generator:

  async function* subscribe({ fromBlock = 0, toBlock = 'latest', filter = {} } = {}) {
    let res;
    let rej;
    let promise = new Promise((resolve, reject) => {
      res = resolve;
      rej = reject;

    const subscription = linguo.events.allEvents({ fromBlock, toBlock, filter });
      .on('data', event => {

        promise = new Promise((resolve, reject) => {
          res = resolve;
          rej = reject;
      .on('error', err => {
        promise = new Promise((resolve, reject) => {
          res = resolve;
          rej = reject;

    while (true) {
      try {
        const event = await promise;
        yield event;
      } catch (err) {
        console.warn(`Canceling event subscription for contract ${linguo.options.address}`, err);


Then to combine the multiple subscribe() calls, I've found this merge operator from the repeatable library.

Then I happily wrote my saga:

export async function* subscribeSaga(action) {
  const { fromBlock, toBlock, filter } = action.payload ?? {};

  const linguoApi = yield getContext('linguoApi');
  const subscription = yield call([linguoApi, 'subscribe'], { fromBlock, toBlock, filter });
  for await (const evt of subscription) {
    console.log('>>>', evt);

Only to find out then that redux-saga does not support async generators :/

Any ideas?

Mihai Moraru
Hi guys, I just posted an article on medium about a simple way of using redux saga (+ reduxsauce). Check it here. I'd appreciate any feedback.