yield [] 和 yield all() 的区别 - ES6/redux-saga答案

【问题标题】：Difference between yield [] & yield all() - ES6/redux-sagayield [] 和 yield all() 的区别 - ES6/redux-saga
【发布时间】：2018-06-03 03:41:13
【问题描述】：

使用 redux-saga 的 yield all([]) 比使用 ES6 的内置 yield [] 有什么优势吗？

要并行运行多个操作，redux-saga 建议：

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

但是不使用all() 方法也可以实现同样的效果：

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

哪个更好，为什么？

【问题讨论】：

documentation 的说法，与Promise.all([...]) 和Promise.resolve([...]) 的区别基本相同
他们在做同样的事情——生成任务并等待所有任务完成。顺便说一句，生成数组不是特定的 ES6 特性，而是 redux-saga 的事情。
事实上两者都没有内置到 ES6 中。如果你使用生成器函数，redux-saga 会处理所有的值。

标签： javascript ecmascript-6 yield redux-saga

【解决方案1】：

没有功能上的差异，正如 Mateusz Burzyński（redux-saga 维护者）解释的 here：

实际上它们是相同的，yield [...effects] 会导致弃用警告，并通知您有关 all 的信息。

这是为了使并行行为显式引入的，它很好地反映了Promise.all

最好使用all()，因为它告诉读者我们在这里产生了不止一种效果，但是没有它，yield 的各种用法仍然可以工作：

生成具有多种效果的对象

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

产生一个数组字面量

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

使用地图生成数组

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

【讨论】：