Difference between yield [] & yield all() - ES6/redux-saga

Ali Saeed picture Ali Saeed · Dec 20, 2017 · Viewed 10k times · Source

Is there any advantage in using redux-saga's yield all([]) over ES6's built-in yield []?

To run multiple operations in parallel, redux-saga suggests:

const result = yield all([
  call(fetchData),
  put(FETCH_DATA_STARTED),
]);

But the same can be accomplished without the all() method:

const result = yield [
  call(fetchData),
  put(FETCH_DATA_STARTED),
];

Which one is better & why?

Answer

Ali Saeed picture Ali Saeed · Dec 21, 2017

There's no functional difference, as Mateusz Burzyński (redux-saga maintainer) explains here:

Under the hood they are both the same, yield [...effects] will result in a deprecation warning though and inform you about all.

This was introduced to make parallel behaviour explicit and it nicely mirrors Promise.all

It's preferred to use all() as it informs the reader that we're yielding more than 1 effect here, but the various uses of yield will still work without it:

yielding an object with multiple effects

const { company, profile } = yield {
  company: select(getCompany),
  profile: select(getUserProfile, userId),
};

yielding an array literal

yield [
  put(userRequestSucceeded(userId)),
  put(userReceived(response.data)),
];

yielding an array using map

yield userIds.map(userId => call(fetchUserDetails, userId));