Issues using redux saga

Active3 hr before
Viewed126 times

8 Answers


Sponsor Sponsor redux-saga/redux-saga ,By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails., Already on GitHub? Sign in to your account

 Pretag team - issue, fix, solve, resolve

Assuming you dispatch FETCH_DATA somewhere in your app and aware of an infitite loop because redispatching of FETCH_DATA in saga. You don't need to call a function when you pass it in call. So instead of const payload = yield call(fetchData()); you need to write const payload = yield call(fetchData); – Shlang Apr 22 '20 at 21:56 ,I added to my application redux saga, but i don't know why, but it does not work. I have the next code: My saga, Don't be that account: buying and selling reputation and bounties

 Pretag team - issue, fix, solve, resolve

It will put the application into an infinite loop because take() only creates a description of the effect. Unless you yield it for the middleware to execute, the while loop will behave like a regular while loop, and freeze your application.,Adding yield will pause the generator and return control to the Redux Saga middleware which will execute the effect. In case of take(), Redux Saga will wait for the next action matching the pattern, and only then will resume the generator.,Make sure the Saga is not blocked on some effect. When a Saga is waiting for an Effect to resolve, it will not be able to take dispatched actions until the Effect is resolved.

 Pretag team - issue, fix, solve, resolve

This is telling us that we’re planning to fire-off the callAPI function as we described in our saga. We then compare this to passing callAPI directly into the call method and we should get the same descriptor object each time.,Line 19: Inside, we’re using a try/catch to first try the API call and catch if there’s an error. This generator function will run until it encounters the first yield statement, then it will pause execution and yield out a value.,Line 20: Our first yield is our API call, which, appropriately, uses the call method. Though this is an asynchronous operation, since we’re using the yield keyword, we effectively wait until it’s complete before moving on.

 Pretag team - issue, fix, solve, resolve

Saga works like a separate thread or a background process that is solely responsible for making your side effects or API calls unlike redux-thunk, which uses callbacks which may lead to situations like ‘callback hell’ in some cases. However, with the async/await system, this problem can be minimized in redux-thunk.,I hope this blog helps you choosing the suitable tool for your upcoming projects.,Redux middleware is a function or a piece of code that sits between action and reducer and can interact with the dispatched action before reaching the reducer function.

 Pretag team - issue, fix, solve, resolve

In this two-part blog post I would like to show basic and advanced use cases of side-effects management in React applications using Redux-Saga. I will explain why we like it here in AppsFlyer, and what kind of issues it can solve.,“Saga is like a separate thread in your application that’s solely responsible for side effects.”,In this part I covered some basic concepts related to Redux-Saga and showed how it’s integrated with React application. In the second part I will try to show the actual value we gained from using it in a real-life production application.

This a basic example of a generator, which returns a couple of strings:

function* namesEmitter() {
   yield "William";
   yield "Jacob";
   return "Daniel";
} // execute the generatorvar generator = namesEmitter();console.log(; // prints {value: "William", done: false}console.log(; // prints {value: "Jacob", done: false}console.log(; // prints {value: "Daniel", done: true}

When the sequence length is unknown, we can write the code above like this:

var results =;
while (!results.done) {
   results =;

We can demonstrate this by showing a common flow:
User interacts with the UI, this interaction triggers a request for data from the server (while displaying a ‘loading’ indication), and finally we use the response value to render something in the page.
Let’s create an action for each step, and see what it looks like with Redux-Saga using a simplified pseudo-code version of the code:

// saga.jsimport { take } from 'redux-saga/effects'function* mySaga(){     yield take(USER_INTERACTED_WITH_UI_ACTION);}

Now we will do something in response to this action by causing the UI to render a ‘Loading’ indication. This will be done by dispatching an action for the reducer to handle using a ‘put’ effect which dispatches an action:

// saga.jsimport { take, put } from 'redux-saga/effects'function* mySaga(){     yield take(USER_INTERACTED_WITH_UI_ACTION);    yield put(SHOW_LOADING_ACTION, {isLoading: true});}// SHOW_LOADING_ACTION: (state, isLoading) => {    return Object.assign({}, state, {showLoading: isLoading});}...

The next step is executing a request by using the ‘call’ effect, which takes a function and an argument, and executes the function using those arguments. We will give ‘call’ a ‘GET’ function that executes a server call and returns a promise, which will hold the response content when successful:

// saga.jsimport { take, put, call } from 'redux-saga/effects'function* mySaga(){     yield take(USER_INTERACTED_WITH_UI_ACTION);    yield put(SHOW_LOADING_ACTION, {isLoading: true});    const data = yield call(GET, '');    yield put(SHOW_DATA_ACTION, {data: data});}// SHOW_DATA_ACTION: (state, data) => {    return Object.assign({}, state, {data: data, showLoading: false};}...
load more v

But the problem with this approach is that in large applications, you might have multiple components that want to fetch a user, so you might have duplicate logic, and this becomes difficult to maintain.,Here, we have the fetch user API call in the action creator, so any component that needs to fetch a user can dispatch the requestUser() action instead of duplicating logic.,So what the line above does is call the fetchTopAnimes async function, wait for it to be resolved, then the response is saved in the data variable. if the promise failed then it is caught in the catch block of the try-catch.

 Pretag team - issue, fix, solve, resolve

A redux store natively only knows how to dispatch actions and update its state using its root reducer. Actions represent an event describing something happening in your application and an intention to change your application's state. A reducer accumulates values from or stemming from dispatched actions and accumulates these values into the newly updated state of your application.,Redux Saga also offers us a collection of helper functions that are used to spawn your tasks when some specific actions are dispatched. These can be used to help organize when and how your tasks are executed.,Reducers must be written as a pure function, as it is necessary to enable useful features of Redux such as time travel (replaying past actions). Actions are simply objects passed on into the reducer and are naturally deterministic. Thus we have a problem; there isn't any place in your Redux application to put your side effects in.

 Pretag team - issue, fix, solve, resolve

Other "redux-using" queries related to "Issues using redux saga"