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

Question

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?

telling by the [documentation](https://github.com/redux-saga/redux-saga/tree/master/docs/api#alleffects), basically the same differrence as between `Promise.all([...])` and `Promise.resolve([...])` — Thomas, Dec 20 '17 at 14:43
They are doing the same thing - spawn tasks and wait for all of them to finish. BTW, yielding an array isn't a specific ES6 feature, it's a `redux-saga` thing. — pumbo, Dec 21 '17 at 03:33
In fact neither is built into ES6. If you are using generator functions, redux-saga is handling all the values. — Bergi, Dec 21 '17 at 19:51

score 22 · Accepted Answer · edited Jun 20 '20 at 09:12

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));

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

1 Answers1