响应式编程 rx.js redux

响应式编程是一种通过异步和数据流来构建事物关系的编程模型。是基于观察者模式的js的实现。

理解

如果要直接理解，可能比较抽象，但我们可以引用百度百科的例子；例如：a = b + c; 这句代码将b+c的值赋给a，而之后如果b和c的值改变了不会影响到a，然而，对于响应式编程，之后b和c的值的改变也动态影响着a，意味着a会随着b和c的变化而变化。

响应式编程过程中，一般有以下几个组件，Observable/Operator/Subscriber；对应到代码中就是不同类。这个流程，可以简单的理解为：Observable -> Operator1 -> Operator2 -> Operator3 -> Subscriber。

解释

Observable：可理解为能观察的对象；例如：一个数组。

Operator：就是对数据进行一些操作，例如：排序，过滤，两个数组合并；都是操作，同时还可以多个一起用。

Subscriber：订阅器；目的是接收处理后的数据；在一个方法中，或者回调方法中，可以接收到操作后的数组。

优点

对应同步编程来说，和普通编程差不都；但对于异步编程，使用响应式会很方便。

缺点

写代码很反人类，响应式本质就是callback的封装。还是得把一步一步的操作换成一个一个回调；但是各个回调之间的变量共享，多级回调之间的组织等，都是问题。（简而言之，人使用命令式的方式思考的，所以没法自然的用响应式开发。比如说明书、PRD都是命令式的）。
没有有意义的堆栈，传统的堆栈，不管是调试时打的断点，还是日志中的异常栈，都是能看到哪个函数出错了，并向上逐级回溯调用方。但是响应式编程，在这个callback的堆栈里面是看不到谁放置了这个callback。

rx.js———响应式编程的一个js库

RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。

可以把 RxJS 当做是用来处理事件的 Lodash 。

核心概念
在 RxJS 中用来解决异步事件管理的的基本概念是：
Observable (可观察对象)：表示一个概念，这个概念是一个可调用的未来值或事件的集合。
Observer (观察者)：一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
Subscription (订阅)：表示 Observable 的执行，主要用于取消 Observable 的执行。
Operators (操作符)： 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
Subject (主体)： 相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。
Schedulers(调度器)：用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

Observable – 可观察对象
Observable被称为可观察序列，简单来说数据就在Observable中流动，你可以使用各种operator对流进行处理。

// 当订阅下面代码中的 Observable 的时候会立即(同步地)推送值1、2、3，然后1秒后会推送值4，再然后是完成流
const observable = rxjs.Observable
// 通过create方法创建一个Observable
// 回调函数会接受observer参数，也就是观察者角色
.create(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
Observer – 观察者
观察者只是一组回调函数的集合，每个回调函数对应一种Observable发送的通知类型：next、error和complete。
要使用观察者，需要把它提供给Observable的subscribe方法。
Next – 表示数据正常流动，没有出现异常
Error – 表示流中出错，可能是运行出错，http报错等
Complete – 表示流结束，不再发射新的数据
在一个流的生命周期中，error和complete只会触发其中一个，可以有多个next（表示多次发射数据），直到complete或者error。

console.log(‘just before subscribe’);
// Observe观察者
// Observer 是一个对象，这个对象具有三个方法，分别是 next, error, complete
// 要使用观察者，需要把它提供给 Observable 的 subscribe 方法
const observe = {
next: x => console.log('got value ’ + x),
error: err => console.error('something wrong occurred: ’ + err),
complete: () => console.log(‘done’),
};

// 订阅这个 observable
// 只有在订阅之后，才会在流Observable变化的时候，调用observer提供的方法，并通知他
observable.subscribe(observe);
console.log(‘just after subscribe’);
// 输出
/just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done/
Subscription - 订阅
Subscription是表示可清理资源的对象，通常是Observable的执行。Subscription有一个重要的方法，即unsubscribe，它不需要任何参数，只是用来清理由Subscription占用的资源。
Subscription基本上只有一个unsubscribe()函数，这个函数用来释放资源或取消Observable执行。

let subscription = observable.subscribe(observe);
setTimeout(() => {
subscription.unsubscribe();
}, 1000);
Operators - 操作符
操作符是Observable类型上的方法，比如map()、filter()、merge()等等。当操作符被调用时，它们不会改变已经存在的Observable实例。相反，它们会返回一个新的Observable，它的subscription逻辑基于第一个Observable。
RxJS的操作符有点多，我们可以按照种类分为：组合、条件、创建、错误处理、过滤、多播、转换以及一些工具。可参考https://rxjs-cn.github.io/learn-rxjs-operators/operators/，使用时按需要寻找，其实部分操作符从功能来讲可能会觉得区别不太大，区分起来也比较困难，我们可以查阅它们的弹珠图来方便我们区分。我们之举一个简单的例子来展示一下。

const { from } = rxjs;
const { filter, take, last, startWith, skip } = rxjs.operators;

// 发出(1, 2, 3, 4, 5)
const source = from([1, 2, 3, 4, 5]);
const example = source.pipe(
  // 开头追加 6, 8 得 6, 8, 1, 2, 3, 4, 5
  startWith(6, 8),
  // 舍弃第一个 得 8, 1, 2, 3, 4, 5
  skip(1),
  // 只取偶数得 8, 2, 4
  filter(num => num % 2 === 0),
  // 再取前俩得 8, 2
  take(2),
  // 只取最后一个得 2
  last()
);
example.subscribe(val => {
  console.log(`The number: ${val}`)
});

Subject – 主体
Subject是一个特殊类型的Observable，它允许将值多播给多个观察者，所以Subject是多播的，而普通的Observables是单播的（每个已订阅的观察者都拥有Observable的独立执行）。
每个Subject都是Observable。对于Subject，你可以提供一个观察者并使用 subscribe 方法，就可以开始正常接收值。从观察者的角度而言，它无法判断 Observable 执行是来自普通的 Observable 还是 Subject。
每个 Subject 都是观察者。Subject 是一个有如下方法的对象： next(v)、error(e) 和 complete() 。要给 Subject 提供新值，只要调用 next(theValue)，它会将值多播给已注册监听该 Subject 的观察者们。

const {take} = rxjs.operators;

const source = rxjs.interval(1000).pipe(take(3));
const subject = new rxjs.Subject();

// observer 其实就是实现了next方法，error方法和complete方法的对象
const observerA = {
next: value => {
console.log(A: + value )
},
error: error => {
console.log(‘Error:’, error);
},
complete: () => {
console.log(‘complete’);
}
};

const observerB = {
next: value => {
console.log(B: + value)
},
error: error => {
console.log(‘Error:’, error);
},
complete: () => {
console.log(‘complete’);
}
};

// 不会执行，相当于注册 observer，只是将给定的观察者注册到观察者列表中
subject.subscribe(observerA);
subject.subscribe(observerB);
// setTimeout(() => {
// subject.subscribe(observerB);
// }, 2000)

// 注释去掉才会执行
// source.subscribe(subject);
Schedulers – 调度器
调度器控制着何时启动subscription和何时发送通知。由三部分组成：
调度器是一种数据结构。它知道如何根据优先级或其他标准来存储任务和将任务进行排序。
调度器是执行上下文。它表示在何时何地执行任务（举例来说，立即的，或另一种回调函数机制（比如setTimeout）, 或动画帧)。
调度器有一个（虚拟的）时钟。调度器功能通过它的getter方法now()提供了“时间”的概念。在具体调度器上安排的任务将严格遵循该时钟所表示的时间。

// 调度器可以让你规定 Observable 在什么样的执行上下文中发送通知给它的观察者。
// https://www.jianshu.com/p/5624c8a6bd2b
const observable = rxjs.Observable.create(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
})
// observeOn 作用
// 改变通知的Notifications执行时机，即Observables中的Next,Error,Complete函数
// 能够用于每个操作符的前面，即可以多次使用
.observeOn(rxjs.Scheduler.async); // 设置为async
console.log(‘just before subscribe’);
observable.subscribe({
next: x=> console.log(got value ${v}),
error: err => console.error(something wrong occurred: ${err}),
complete: () => console.log(‘done’)
});
console.log(‘just after subscribe’);
// 输出结果：
/just before subscribe
just after subscribe
got value 1
got value 2
got value 3
done/
由于调度器使用的不多，只简单的说明一下。
本篇主要是大致的介绍一下RxJS，让大家可以有个初步的概念，如果想研究更多更详细的，请参考RxJS中文文档。

redux

基础介绍