Redux Saga, ES6 generators, React Query

• Redux Saga is a middleware library to manage side effects
• 'sagas' are generator functions, saved in the Redux store
• generator functions are defined with the syntax function* myFunction() {...} and return a generator object
• generators are iterators that instead of iterating on given data, iterate on computed data (the yielded values)

Example of generator function from Flanagan (2020):

function* fibonacciSequence() {
    let x = 0, y = 1;
    for(;;) {
        yield y;
        [x, y] = [y, x+y];
    }
}

We can now use the generator as an iterable object, say to log the first 5 numbers:

for (const n of fibonacciSequence()) {
  if (n >= 5) break;      // stop once we hit 5 or higher
  console.log(n);
}

To use it properly, another generator would be used to wrap and pull data from the first one:

function* limitedFibonacci(limit) {
  let i = 0;                                 // how many values we have emitted
  for (const n of fibonacciSequence()) {    // pull from the *first* generator
    if (i++ >= limit) return;                // stop after `limit` items
    yield n;                                 // forward the value outward
  }
}

and then iterate without risking an infinite loop:

for (const n of limitedFibonacci(5)) {
  console.log(n);
}

Sagas use this logic, for example, to iteratively call APIs and yield the fetched data (it's much more than this).

React Query / TanStack Query

• data fetching library
• focused on Reach hooks to consume server states stored as cache
• common hooks are for example useQuery, useMutation, useInfiniteQuery
• they implement automatic caching and deduplication (eg. for identical query keys)
• useful to sync UI with remote data

Resources

• Redux-Saga - An intuitive Redux side effect manager. | Redux-Saga (no date). https://redux-saga.js.org/.
• Flanagan, D. (2020) JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language. 'O’Reilly Media, Inc.'
• Overview | TanStack Query React Docs (no date). https://tanstack.com/query/latest/docs/framework/react/overview.