RxJS + Redux + React = Amazing!(译一)

时间:2023-12-20 13:36:56

今天,我将Youtube上的《RxJS + Redux + React = Amazing!》翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频:

https://www.youtube.com/watch?v=AslncyG8whg

开场白

管理状态很困难,对吧?如果你写过复杂应用,你一定对此深恶痛绝。React社区还有Angular2社区和Ember社区现在都开始使用一个库,叫Redux。为什么?因为它让管理状态变得简单多了。但Redux有个问题,就是它对你写异步代码没什么帮助,因为Redux认为异步是个比管理状态更难的问题。特别是当你试图去解决一些复杂问题,比如:并行或多重WebSockets。这些问题本身就很复杂,你也没辙。所以,这次演说将会介绍使用另一个库,叫RxJS。这个库至少可以让异步问题变得可控可管理,至少可以让你知道发生了什么。

RxJS + Redux + React = Amazing!(译一)

自我介绍

我是谁?我是Jay Phelps。很明显,照片中的衬衫不是我今天穿的,尽管它们很像,(歪果仁就是啰嗦,不过场下听众听到这都乐了)。其实我穿了另外一件蓝色衬衫,但这是我的推特头像,它可以帮助那些还没有认出我的人认出我来。很明显,我是Netflix的软件工程师。你可以关注我,通过下划线jayphelps(就是_jayphelps,然后他又扯了一些没用的,说有另外一个jayphelps,是一个16岁的家伙,经常转推一些足球图片。他说他经常说这个梗,因为很多本来要关注他的人,都去关注那个16岁足球小哥了)。

RxJS + Redux + React = Amazing!(译一)

什么是Redux

让我们开始讨论什么是Redux。这个演说不会详细介绍Redux和RxJS,因为它们本身就有非常多相关的演说,但我会给你们一个速成教程。这样,即便你不知道它们具体是什么,至少可以了解个大概。Redux提供了一个可预测的状态管理,它通过action和reducer来完成这个工作。那么什么是action?action被用来描述发生的事,但它不关心如何这件事如何发生。让我们来看个例子吧!

{
  type: "CREATE_TODO",
  payload: "Build my first redux app"
}

这是个简单的action,通过这个action,你知道了你要去创建一个todo,这个todo的内容是什么,但它没说如何去创建这个todo,它没说是是否要与服务器交互,也没说是否要存到数据库或localstorage中,它没有进行异步操作,它是个完全可以被序列化的对象。那么什么是reducer?reducer是一些纯函数,这意味着每次你给了一样的输入,那么就会有一样的输出,没有副作用。reducer的具体功能是输入上个的state和action,然后输出新的state,当然新的state可以和上个state完全一样(就是case为default的情况)。举个非真实场景的例子吧,这是个计数器的例子:

export default function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT_COUNTER:
      return state + 1
    case DECREMENT_COUNTER:
      return state - 1
    default:
      return state
  }
}

我们仅仅就是选择action类型,当action是加一,state就加一,action是减一,state就减一,就是这么字面性质的工作。reducer负责state更新,但它必须是同步的。这意味着,如果reducer收到加一的action,那么就必须立马加一。reducer不能去除速率过快的事件(debounce),也不能和服务器交互,也不能问“我是否可以加一“。reducer只能受到action,然后立马同步执行。

RxJS + Redux + React = Amazing!(译一)

异步

我们平时都做些什么类型的异步操作呢?(竟然没有衔接,直接从Redux转折到异步)为何说异步是个难缠的问题呢?常见的异步事件操作包括:

  • 用户交互(键盘、鼠标)
  • Ajax(这就像面包和黄油一样熟悉,我们每个人都会做Ajax请求)
  • 计时器/动画
  • Web Sockets
  • Web Workers

这不是个详细的列表。上述其中一些可以同步处理,尽管它们本身是异步的。React与Redux已经封装好了,你可以直接同步处理它们!(然后,他举了一个例子,React组件的点击事件,可以触发加一的action,然后reducer处理这个action)从技术角度上来说,这些事件是异步的,但你可以用同步的方式来处理它。为什么?因为React已经帮你处理了异步。但是,问题来了,如果你还想要点击,如果你想去除速率过快的事件,比如,用户点了很多次,而你不想每次都进行事件处理。这时,你通常会计算点击间隔,然后只处理间隔较大的点击事件。有时候,你需要像这样的更多的控制。这些控制包括:

  • Ajax取消/组合(组合的意思是,比如你发起了一个Ajax,然后你又发起了另外一个Ajax,后一个的发起用到了前一个的响应数据)
  • Debounce/throttle/buffer等这些与时间相关的操作
  • Drag and Drop
  • Web Sockets, Web Workers, etc

在Redux世界里,人们经常使用中间件来处理这些操作。所有action在你发起后,和到达reducer前,都必须穿过中间件。现在已经有很多中间件使用回调和Promise来做这些事了(指那些复杂的异步操作)。下面就让我们看看这两种最常用的异步处理方法吧!

RxJS + Redux + React = Amazing!(译一)

回调和Promise

回调对大家来说非常熟悉,因为它是JavaScript最原始的处理异步的方式(然后他举了个回调的例子,回调太简单,不再赘述)。但是回调有很多问题,其中最常见的就是“回调地狱“。大家几乎都见过这种代码(他指着屏幕上的代码示例)。如果你想改变代码,比如做点这样的事:

  • 条件判断,然后决定是否进行下一个异步
  • 你不想顺序执行这些异步
  • 更加复杂的回调操作,比如你想并发它们等

那么事情就变得非常复杂了,对吧?我的同事称回调地狱是“V型电吉他“,因为它们的形状非常相似。不过,有了一种解决方案,叫Promise。使用Promise有个绝招,那就是如果你给Promise提供了一个回调,这个回调也返回了一个Promise,那么你可以将其写为平行的风格(这算什么绝招啊,大多数人都知道吧!)。如果你理解了这种模式,那么Promise的代码将会变得非常易读。这很棒,它是个非常好的候选方案。让我们更深入的了解一下Promise吧!Promise拥有这些特性:

  • 被保证的未来(意思是,一旦你创建了一个Promise,那么它肯定会执行它要做的事情,你不能停止它,开始黑Promise了。)
  • 不可变
  • 单一的值(意思是,如果你监听一个Promise很多次,你只会得到相同的值,而不是执行多次请求 )
  • 缓存

在真实项目中,你会发现“被保证的未来“和“单一的值“是个问题,先说“被保证的未来“吧,Promise是不能被取消的。或许你会问,我既然创建了一个Promise,为何要取消它?以下场景,你就要取消你的Promise,也就是异步请求:

  • 改变路由/视图(他举了Netflix的一个例子,大概就是点进一个页面,然后后悔了就返回了,这时需要取消请求)
  • 自动补全(这个例子比较常见,自动补全总不能每次键盘按下都发请求吧?)
  • 用户非要你取消

可见,取消异步是一个非常常用,但是容易被忽略的需求。再说Promise的“单一的值“吧!(然后开始黑Promise的“单一的值“,不过他欲扬先抑了一下),其实绝大多数场景下,我们只需要单一的值,比如Ajax,请求-响应,就是单一的值。但人们不只想做这些事,像之前提到的:

  • 用户交互(键盘、鼠标)
  • Ajax(这就像面包和黄油一样熟悉,我们每个人都会做Ajax请求)
  • 计时器/动画
  • Web Sockets
  • Web Workers

上述场景也就Ajax是单一的值,其他几个场景都不是。那我们该怎么办呢?那就是使用Observable!

RxJS + Redux + React = Amazing!(译一)

未完待续

这个视频太长了,今天就到此为止吧!在这篇文章中,我们主要听了Jay Phelps:

  • 讲了Redux和异步
  • 黑了回调和Promise

下篇文章我们将听他:

  • 吹Observable的牛
  • 讲述他和他搭档造redux-obserable这个*背后的故事!

第二篇已经发布:RxJS + Redux + React = Amazing!(译二)