【第1887期】Async Generators 作为状态管理的替代方案

前言

今早一则新闻是GitHub 已经签署了收购 npm 的协议。今日早读文章由@luyc翻译，@Miya授权分享。

正文从这开始～～

Async Generators （异步生成器） 是一个简单但功能强大的特性，它现在已经是 JavaScript 的一部分，它解锁了许多新的工具来改进软件结构，使其更加灵活、易扩展、更易组合。

TL;DR

• 使用 Async Generators ，将不再需要组件状态、状态管理工具、生命周期方法，甚至也不需要 React Context 、 Hooks 、 Suspense APIs，它将简化开发，管理和测试。

• 与状态管理方法不同的是，异步生成器将异步转换变得更加可控而无害（它只在生成器作用域里有效）。

• 这个思路有函数式编程的背景。

• 像时间旅行器、通用应用程序也是可用的。

• 这篇文章使用了 React 和 JavaScript ，但是这项技术对于其他框架或拥有生成器（协程）的编程语言来说都是适用的。

• 本文的大部分内容都是关于异步生成器的，我只在最后简短介绍我自己的工具。

我们首先看看 Redux 的由来:

我们之所以觉得这很复杂，不好处理，是因为我们把两个对于人类的思维来说难以理解的概念混合在一起，这两个概念是突变和异步性。我称之曼妥思和可乐现象——两者分开时各自都运行得很好，但放在一起使用，就会造成混乱。

Redux 和其他的状态管理工具主要侧重于约束和控制数据的突变。异步生成器可以处理异步，如果变异仅在特定的生成器范围内可见，则更安全。

所有常见的状态管理技术可以分为两大类。

第一类是维护数据关系图，通过处理器传播改变——React组件状态、MobX、RxJS。维护这些关系是一项复杂的任务。底层库通过管理订阅，优化处理器执行顺序，对它们进行批处理来负责部分复杂的任务，但有时使用起来仍然令人困惑，通常需要进行硬微调，例如，使用 shouldComponentUpdate 方法。

另一种方法是将突变限制为仅有单个单元（storage），例如 Redux。这需要更小的并且带有更少魔法功能的库。说它是库，其实它更像是一种模式。不过，这种程序会更加冗长，破坏数据的封装。虽然有很多模式或包装器可以解决这个问题，但是它们使用单个单元的方法更类似于基于图的方法。

本文介绍的技术和 Redux 都是基于事件源模式，它们有许多相似之处，它也会为具有副作用的操作提供封装数据和使用同步来确定执行顺序。

这种方法也可以抽象地视为依赖图，但是变化是反向传播的，从它的根节点朝它生成树的子节点。在每一个节点处，我们需要检查传播是否应该传给子节点。这样使调度算法非常轻量级并且易于控制。它不需要引入任何库，仅基于JavaScript内置功能。

让我们首先引入 Redux VanillaJS counters 的例子来阐释这个想法。

1. // vanila JS example

2. async function* counter(input) {

3. let state = 0

4. yield {type: "VALUE", value: state}

5. for await(const action of input) {

6. switch (action.type) {

7. case "INCREMENT":

8. state++

9. yield {type: "VALUE", value:state}

10. break

11. case "DECREMENT":

12. state--

13. yield {type: "VALUE", value:state}

14. break

15. }

16. yield action

17. }

18. }

19. // nano framework

20. function createStore(main) {

21. let state

22. let callback

23. const queue = []

24. const producer = async function* producer() {

25. for(;;) {

26. while(queue.length)

27. yield queue.shift()

28. await new Promise(i => callback = i)

29. callback = null

30. }

31. }();

32. (async function consumer() {

33. for await(const i of main(producer)) {

34. if (i.type === "VALUE")

35. state = i.value

36. }

37. })()

38. return {

39. getState() { return state },

40. dispatch(action) {

41. if (callback)

42. callback()

43. queue.push(action)

44. }

45. }

46. }

47. function pipe(...args) {

48. return function(i) {

49. for(const f of args)

50. i = f(i)

51. return i

52. }

53. }

54. var store = createStore(pipe(counter,render))

55. var valueEl = document.getElementById("value")

56. async function* render(input) {

57. for await(const i of input) {

58. if (i.type === "VALUE")

59. valueEl.innerHTML = i.value.toString()

60. yield i

61. }

62. }

63. document.getElementById("increment")

64. .addEventListener("click", function () {

65. store.dispatch({ type: "INCREMENT" })

66. })

67. document.getElementById("decrement")

68. .addEventListener("click", function () {

69. store.dispatch({ type: "DECREMENT" })

70. })

71. document.getElementById("incrementIfOdd")

72. .addEventListener("click", function () {

73. if (store.getState() % 2 !== 0) {

74. store.dispatch({ type: "INCREMENT" })

75. }

76. })

77. document.getElementById("incrementAsync")

78. .addEventListener("click", function () {

79. setTimeout(function () {

80. store.dispatch({ type: "INCREMENT" })

81. }, 1000)

82. })

原版的 reducer 是用异步生成器函数替代的，该函数计算并将其状态存储在一个局部变量中，它还会产生计算值，新的值被存储在单例存储中，并且它可以从事件处理器中访问。我将在下一步中删除那个单例存储。

这个版本与 Redux 中的例子没有什么不同，异步生成器可以是 Redux 的存储中间件。这样违反了其中一条 Redux 原则，即仅将所有应用程序状态存储在存储器中。即使生成器没有任何的局部变量，它仍然具有执行状态——在 yield 或 await 中暂停执行的代码的位置。

从内到外转换组件

生成器函数是返回迭代器的函数。我们可以用普通函数完成我们所做的一切，例如，通过组合生成器函数，我们可以将计算分成几个独立的阶段，每个阶段有自己的封装状态，每个阶段接收前一阶段产生的消息，处理它们时会产生另一个消息，将这些消息传递到下一个阶段。

消息的有效负载可以包含 VDOM 元素。我们不是使用一个单独的组件树，而是将它的一部分发出去并且发送到下一个阶段，然后对其进行组装或转换。这里有一个相同的 React 的计数器示例。

1. run(pipe(

2. counter,

3. incrementAsync,

4. incrementIfOdd,

5. control,

6. render

7. ))

8. async function* counter(input) {

9. let state = 0

10. yield {type: "VALUE", value: state}

11. for await(const action of input) {

12. switch (action.type) {

13. case "INCREMENT":

14. state++

15. yield {type: "VALUE", value:state}

16. break

17. case "DECREMENT":

18. state--

19. yield {type: "VALUE", value:state}

20. break

21. }

22. yield action

23. }

24. }

25. async function* control(input, dispatch) {

26. const menu = {}

27. for await(const i of input) {

28. yield i

29. if (i.type === "MENU_ITEM")

30. menu[i.index] = React.cloneElement(i.value, {key:i.index})

31. else if (i.type === "VALUE")

32. yield {type:"CONTROL",

33. value: <p>

34. Clicked: {i.value} times

35. <button onClick={() =>

36. dispatch({type:"INCREMENT"})}>

37. +

38. </button>

39. <button onClick={() =>

40. dispatch({type:"DECREMENT"})}>

41. -

42. </button>

43. {Object.values(menu)}

44. </p>}

45. }

46. }

47. async function* incrementAsync(input, dispatch) {

48. yield { type: "MENU_ITEM", index: 100,

49. value: <button

50. onClick={

51. () => setTimeout(

52. () =>

53. dispatch({type:"INCREMENT"}), 1000)}>

54. Increment async

55. </button> }

56. yield* input

57. }

58. async function* incrementIfOdd(input, dispatch) {

59. for await(const i of input) {

60. if (i.type === "VALUE")

61. yield { type: "MENU_ITEM", index: 200,

62. value: <button

63. onClick={() =>

64. i.value % 2 && dispatch({type:"INCREMENT"})}>

65. Increment if Odd

66. </button> }

67. yield i

68. }

69. }

70. async function* render(input) {

71. const el = document.getElementById("root")

72. for await(const i of input) {

73. if (i.type === "CONTROL")

74. ReactDOM.render(i.value,el)

75. yield i

76. }

77. }

78. async function run(main) {

79. let callback

80. const queue = []

81. const producer = async function* producer() {

82. for(;;) {

83. while(queue.length)

84. yield queue.shift()

85. await new Promise(i => callback = i)

86. callback = null

87. }

88. }();

89. function dispatch(action) {

90. if (callback)

91. callback()

92. queue.push(action)

93. }

94. for await(const i of main(producer,dispatch)){}

95. }

96. function pipe(...args) {

97. return function(input,dispatch) {

98. for(const f of args)

99. input = f(input,dispatch)

100. return input

101. }

102. }

pipe 函数是一个函数组合，函数接收两个参数，第一个是来自前一阶段消息的异步迭代，第二个是将消息发送到 pipe 的起始。它应该只从事件处理器调用。使用 JavaScript 嵌入式管道运算符可以很快替换此函数。

当我们编写普通函数时，链中的下一个函数仅在前一个函数完成之后开始执行。对于生成器（实际上是任何协程），执行操作都可以与其他函数交叉执行或暂停。这使得将不同部分组合起来会更加容易。

上面的示例通过将一些菜单按钮从根组件分离到一个单独的阶段，简要地展示了可扩展性。它不是将菜单按钮抽象到一个单独的组件中，而是维护一个占位符，它会在 “MENU_ITEM” 类型的消息中注入它接收的组件。

扩展

这项技术令人兴奋的一点是，你不需要预先设计什么即可实现代码重用和解耦。如今过早抽象的害处可能远大于过早优化。差不多可以肯定的是，它会因为过度设计而导致混乱而无法使用。使用抽象生成器，很容易保持稳定并实现所需的功能，在需要时进行拆分，而不用考虑将来的扩展，在更多细节可用之后易于重构或抽象一些公共部分。

Redux 以使程序更易于扩展和重用而闻名。本文的方法也是基于事件溯源的，但是运行异步操作要简单得多，而且没有单个存储的瓶颈，所以不应该过早设计任何东西。

许多开发者喜欢单一存储，因为它易于控制，虽然控制不是免费的。事件源模式被广泛认同的优点是不存在中央数据库，因此修改某个部分的时候，不会破坏其他部分，操作起来也更加简单并且风险更低。下面的“持久性”部分讨论了单个存储的另一个问题。

《解耦业务逻辑》这篇文章里有更多详细的案例研究。在某个步骤里面，我添加了一个多选功能来拖放，而不会改变单个元素处理中的任何内容。使用单一存储，这意味着将其模型从存储单个当前拖动的元素更改为列表。

在 Redux 里面，有相似的解决方案，叫做应用性高阶 reducer，它能够让 reducer 与一个单独的元素工作并且转化为一个 reducer 工作列表。生成器解决方案使用更高阶的异步生成器替代，为单个的元素提供函数并且为列表生成一个函数，它很类似但不那么冗长，因为生成器封装了数据和隐式控制状态。

我们以一个计数器列表为例。《解耦业务逻辑》一文中介绍了此步骤，我这里不再提供很多细节。fork 函数是异步迭代器转换函数，在每一项线程中运行其参数，它很通用，在许多情景下都可用。比如，我会在下面的部分使用它递归获取一个树状图。

1. run(pipe(

2. menuButton(100,{type:"NEW"}),

3. fork(pipe(

4. menuButton(500,{type:"DELETE"}),

5. counter,

6. buildMenu,

7. counterControl)),

8. totals,

9. buildMenu,

10. controlsList,

11. topControl,

12. render

13. ))

14. async function* counter(input) {

15. let state = 0

16. yield {type: "VALUE", value: state}

17. for await(const action of input) {

18. switch (action.type) {

19. case "INCREMENT":

20. state++

21. yield {type: "VALUE", value:state}

22. break

23. case "DECREMENT":

24. state--

25. yield {type: "VALUE", value:state}

26. break

27. }

28. yield action

29. }

30. }

31. async function* counterControl(input, dispatch) {

32. let value, menu

33. for await(const i of input) {

34. if (i.type === "VALUE" || i.type === "MENU") {

35. if (i.type === "VALUE") {

36. yield i

37. value = i.value

38. } else

39. menu = i.value

40. if (value != null)

41. yield {type:"CONTROL",

42. value: <p>

43. Clicked: {value} times

44. <button onClick={() => dispatch({type:"INCREMENT"})}>

45. +

46. </button>

47. <button onClick={() => dispatch({type:"DECREMENT"})}>

48. -

49. </button>

50. {menu}

51. </p>}

52. } else

53. yield i

54. }

55. }

56. function guessText(value) {

57. let text = value.type[0] + value.type.slice(1).toLowerCase()

58. if (value.async)

59. text += " async"

60. if (value.test)

61. text += ` if ${value.test.toLowerCase()}`

62. return text

63. }

64. function menuButton(pos,value) {

65. return async function* menuButton(input, dispatch) {

66. yield {type:"MENU_ITEM",

67. index:pos,

68. value:<button onClick={() => dispatch(value)}>

69. {guessText(value)}

70. </button>}

71. yield* input

72. }

73. }

74. async function* render(input) {

75. const el = document.getElementById("root")

76. for await(const i of input) {

77. if (i.type === "CONTROL")

78. ReactDOM.render(i.value,el)

79. yield i

80. }

81. }

82. function pipe(...args) {

83. return function(input,dispatch) {

84. for(const f of args)

85. input = f(input,dispatch)

86. return input

87. }

88. }

89. async function* controlsList(input) {

90. const values = {}

91. for await(const i of input) {

92. yield i

93. if (i.type === "ITEM") {

94. if (i.value.type === "DELETE") {

95. delete values[i.key]

96. } else if (i.value.type === "CONTROL") {

97. values[i.key] = React.cloneElement(i.value.value,{key:i.key})

98. } else

99. continue

100. yield {type:"CONTROL", value:Object.values(values)}

101. }

102. }

103. }

104. async function* totals(input) {

105. const values = {}

106. for await(const i of input) {

107. yield i

108. if (i.type === "ITEM") {

109. if (i.value.type === "DELETE") {

110. delete values[i.key]

111. } else if (i.value.type === "VALUE") {

112. values[i.key] = i.value.value

113. } else

114. continue

115. const arr = Object.values(values)

116. yield {type:"MENU_ITEM", index:5000,

117. value: arr.length ? <b>Total {arr.reduce((a,b) => a+b, 0)}</b> : null}

118. }

119. }

120. }

121. async function* topControl(input) {

122. let menu = null, control = null

123. for await(const i of input) {

124. if (i.type === "MENU" || i.type === "CONTROL") {

125. if (i.type === "MENU")

126. menu = i.value

127. else

128. control = i.value

129. yield {type:"CONTROL",

130. value:<div>

131. <div>{menu}</div>

132. <div>{control}</div>

133. </div>}

134. } else

135. yield i

136. }

137. }

138. async function* buildMenu(input) {

139. const items = {}

140. for await(const i of input) {

141. if (i.type === "MENU_ITEM") {

142. items[i.index] = i.value && React.cloneElement(i.value,{key:i.index})

143. yield {type:"MENU", value:Object.values(items)}

144. } else

145. yield i

146. }

147. }

148. function fork(transducer) {

149. let cur = 0

150. return async function* fork(input, dispatch) {

151. const threads = new Map()

152. const iter = async function* forkMain() {

153. for await(const i of input) {

154. if (i.type === "ITEM") {

155. const thread = threads.get(i.key)

156. thread.source.dispatch(i.value)

157. } else if (i.type === "NEW") {

158. const source = createProducer()

159. const key = i.key || ++cur

160. const iter = transducer(

161. source, (value) => dispatch({type:"ITEM",key,value})

162. )[Symbol.asyncIterator]()

163. const thread = {iter,key,task:iter.next(),source}

164. threads.set(key, thread)

165. yield false

166. } else

167. yield i

168. }

169. }()

170. const main = {iter,task:iter.next()}

171. try {

172. for(;;) {

173. const i = await Promise.race(

174. [main,...threads.values()]

175. .map(i => i.task.then(({done,value}) =>

176. (i.value = value, i.done = done, i))))

177. if (i.done) {

178. if (i === main)

179. return i.value

180. threads.delete(i.key)

181. await i.source.dispatch({type:"STOP"})

182. continue

183. }

184. i.task = i.iter.next()

185. if (i.value)

186. yield i === main ? i.value : {type:"ITEM",value:i.value,key:i.key}

187. }

188. } finally {

189. await Promise.all([...threads.values()]

190. .map(i => i.source.dispatch({type:"STOP"})))

191. }

192. }

193. }

194. function createProducer() {

195. let callback

196. const queue = []

197. const producer = async function* producer() {

198. for(;;) {

199. while(queue.length) {

200. const f = queue.shift()

201. yield f

202. if (f.type === "DELETE")

203. return

204. }

205. await new Promise(i => callback = i)

206. callback = null

207. }

208. }();

209. producer.dispatch = function(action) {

210. if (callback)

211. callback()

212. queue.push(action)

213. }

214. return producer

215. }

216. async function run(main) {

217. const producer = createProducer()

218. for await(const i of main(producer,producer.dispatch)){}

219. }

性能

异步生成器开销比状态管理库小得多，但是也有许多方法会导致性能问题，例如，消息过度泛滥。不过也可以通过许多简单方法来提高性能。

在前一个例子中，对 ReactDom.render 进行了无效调用，这显然是个效率问题，并且有一个简单的解决方案。在每一次调用事件之后，通过发送另一个类型为 “FLUSH” 的消息快速解决它。React 渲染只会在它收到这条消息后运行，中间步骤可以产生其中需要的任何东西。

这种方法的另一个令人敬畏的方面是，在问题出现之前，你可能不需要担心性能问题。一切都是在小型自治阶段构建的，它们很容易重构，甚至没有重构——许多性能问题可以通过在步骤管道中添加另一个通用状态来解决，例如批处理，确定优先级，保存中间数据等。

例如，在构建的演示中，React 元素被保存在局部变量中，React 可以重用它们。变化从根向叶传播，因此不需要重写 shouldComponentUpdate 来优化。

测试

与 Redux reducer 测试相比，生成器适合暗箱测试策略，测试无法访问当前状态。尽管如此，它们写起来非常简单。使用 Jest 快照，测试可以是使用快照比较输出，输入内容列表。

1. test("counterControl", async () => {

2. expect.assertions(3)

3. for await(const i of Counter.mainControl([

4. {type:"MENU", value:<span>Menu</span>},

5. {type:"VALUE", value:10},

6. {type:"CONTROL", value:<span>Control</span>},

7. {type:"FLUSH"},

8. {type:"VALUE", value: 11},

9. {type:"FLUSH"}]))

10. if (i.type === "CONTROL")

11. expect(renderer.create(i.value).toJSON()).toMatchSnapshot()

12. })

如果你更喜欢将单元测试作为文档策略，那么有很多方法可以创建用于测试的自记录 API，比方说，函数 eventually/ until 作为传统 BDD 表达式的补充。

持久化状态

Dan Abramov 在《你可能不需要Redux》 这篇文章中描述了 Redux 的另一个特征——即提供对状态的访问，它可以被序列化、克隆、差异化、修复等，这可以用于时间旅行、热重装、通用应用程序等。

要实现这点，整个应用程序状态都应该保存在 Redux 存储中。许多 Redux 应用程序都将某些状态存储在其存储之外，包括组件状态、闭包、生成器或异步函数状态。基于 Redux 的工具无法保持此状态。

当然，单一存储 Redux（即单一数据来源）使程序更简单。不幸的是，这通常是不可能的。例如分布式应用程序，数据在前端和后端之间共享。

事件源模式非常适合分布式应用程序。使用生成器，我们可以编写一个代理，将所有传入的消息发送到远端并挂起所有收到的消息。每个对等体上都可以有单独的管道，或者它们可以是相同的应用程序，但也可以是一些正在运行的进程。许多配置易于设置，使用和重复使用。

例如 pipe(task1，remoteTask2，task3)，这里 remoteTask2 可以是代理，也可以定义为用于调试目的。

每个部分都保持自己的状态，不需要持久化。假设每个任务都是由一个单独的团队实施的，对于状态，他们可以自由地使用任何模型，随时更改它而不必担心破坏其他团队的工作。

这非常适合服务器端渲染，比如，根据后端的输入，可以有一个特定的高阶函数来缓存结果值。

1. const backend = pipe(

2. commonTask1,

3. memo(pipe(

4. renderTask1,

5. renderTask2)),

6. commonTask2)

这里的 memo 高阶函数检查传入的消息，也可能会发现一些计算会被重用。这可能是服务器端呈现的字符串，下一个阶段使用它构建 HTTP 响应。

渲染任务可以运行异步操作，请求远程操作。为了更好的用户体验，我们希望页面加载速度更快。为了加快初始页面加载速度，应用程序可以在加载组件的同时，延迟显示一些加载占位符而不是组件，直到它准备就绪。在页面上有一些具有不同加载时间的组件会导致页面重新布局，从而导致用户体验变差。

React 团队最近宣布了 Suspense API 来解决这个问题。它是嵌入到渲染器中的 React 的扩展。使用本文中的反向组件，不需要 Suspense API，解决方案更简单，它不是 UI 框架的一部分。

假设应用程序使用动态导入来延迟加载控件，这可以通过以下方式完成：

1. yield{type:”LAZY_CONTROL”}

2. yield{type:”CONTROL”, value: awaitimport(“./lazy_component”)}

还有另一个通用的下一个阶段，它收集所有 “LAZY_CONTROL” 消息，等待在接收到所有 “CONTROL” 消息或阈值时间间隔之后，它会使用加载的控件或加载指示器占位符发出 “CONTROL” 消息。所有下一次更新也可以使用一些特定的超时进行批处理，以最大限度地减少重新布局。

某些生成器还可以对消息进行重新排序，以赋予动画比服务器数据更新且更高的优先级。我甚至不确定是否需要服务器端框架。微型生成器可以根据 URL、身份验证会话等将初始 HTTP 请求转换为消息或线程。

函数式编程 常用的状态管理工具具有 FP 背景。由于强制性的 for-of/switch/break 声明，本文中的代码与 JavaScript 中的 FP 看起来不一样。FP 中也有相应的概念。这就是所谓的 单子符号。例如，它们在 Haskell 中的用途之一就是解决诸如 React 组件属性钻孔之类的问题。

我就不偏离主题了，这里有另一篇文章《使用 Generators 作为副作用的语法糖》。

Effectful.js

Effectful.js 是一个 babel 预设，不使用任何 JavaScript 语法扩展，实现对任何函数式编程的无符号工作。它还通过 es-persist 库中的参考实现来支持状态持久性，例如，这可以用于将上述所有异步生成器示例转换为纯函数。

状态持久性不是该工具的主要目标，它用于更高级别的业务逻辑描述。但是，该工具是抽象的，具有许多用途，我会尽快写相关文章。

这是 GitHub上的摘要样本，具有上述所有功能以及自动撤消/重做功能，并将其完整状态存储在 localStorage 中。这是运行编译版本（它写入浏览器的本地存储，但没有信息发送到服务器端）。我就不在本文中提供很多细节了，它是关于没有依赖的异步生成器的，代码很容易阅读。推荐查看 undoredo.js，简单了解时间旅行的实现细节。

原始样本几乎不需要任何更改，我只替换了不可序列化的 Promises，使用了来自 “es-persist” 的相应函数，并使用了来自同一库的 R.bind 函数的调用来代替了闭包。EffectfulJS 工具链还有另一个编译器，可以使所有功能（包括闭包）序列化，但在本示例中为了使其更简单并未使用它。

本文只是对该技术的简要说明，我已经使用了几年了，很高兴它有所改进。试试吧，我相信你也会喜欢它。还有很多东西需要深入描述，敬请关注！

关于本文 译者：@luyc 译文：https://zhuanlan.zhihu.com/p/91468149 作者：@Vitalii Akimov 原文：https://www.freecodecamp.org/news/async-generators-as-an-alternative-to-state-management/

为你推荐

看完这篇之后，你的收获是什么呢？对实际项目有没借鉴意义？