什么是 Observable 执行了 subscribe 方法后的 side effect

在现代 JavaScript 编程中，尤其是使用函数式编程范式时，Observable 是一个非常重要且常见的概念。Observable 是 Reactive Programming（响应式编程）中的核心构建模块，主要用于处理异步数据流。很多人会在它上面调用 subscribe 方法，这种调用可以导致副作用（side effects）。为了更好地理解这一点，让我们深入探讨 Observable、subscribe 方法和副作用。

什么是 Observable？

Observable 是一个通过监听某个值或事件流，可以在不确定的时间点返回零个或多个值的对象。它类似于 Promise，但功能上更为强大和灵活。Observable 可以处理多个值的流，并且可以是同步或异步的。

副作用（Side Effect）是什么？

副作用指的是当调用某个函数时，除了返回值之外，还会改变函数外部的状态或与外界进行交互。简单举例，像修改全局变量、操作 DOM、或是发送 HTTP 请求，这些都是典型的副作用。

Observable 和 Subscribe 的关系

在 Observable 中，subscribe 方法是用来启动这个 Observable 并使其开始发出数据。在调用 subscribe 方法时，我们通常会传递一个 Observer 对象，这个对象定义了当 Observable 发出数据、遇到错误或完成时所执行的方法。

subscribe 方法引起的副作用

调用 Observable 的 subscribe 方法时，常常会引起副作用。例如，当需要处理用户界面变化时，这种操作必然涉及到副作用，因为它需要与 DOM 进行交互。类似地，发送 HTTP 请求、写入日志文件等操作都是副作用。

真实世界的例子

为了更好地理解这些概念，以下是一个例子，它展示了如何通过 subscribe 方法处理用户操作数据，同时引起副作用。

假设我们有一个用户登录系统，当用户点击登录按钮时，我们需要验证用户信息并发送 HTTP 请求。这些操作都涉及副作用。

import { Observable } from 'rxjs';

const loginButton = document.getElementById('loginButton');

const clickObservable = new Observable(subscriber => {
    loginButton.addEventListener('click', event => {
        subscriber.next(event);
    });
});

clickObservable.subscribe(event => {
    // Side effect: fetching user credentials
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // Side effect: sending HTTP request
    fetch(`/api/login?username=${username}&password=${password}`)
        .then(response => response.json())
        .then(data => {
            // Another side effect: updating the UI with server response
            document.getElementById('message').innerText = data.message;
        })
        .catch(error => {
            console.error('Login failed:', error);
        });
});

在这个例子中，clickObservable 是一个 Observable，它监听用户对 loginButton 的点击事件。当点击事件发生时，Observable 发出这个事件，subscribe 方法被调用，开始进行一系列操作：

1. 获取用户名和密码，这是一个副作用，因为它依赖于 DOM 并与外界交互。
2. 发送 HTTP 请求来验证用户信息，这是一个更明显的副作用，因为它与服务器进行交互。
3. 最后，根据服务器返回的响应结果更新用户界面，这又是一个副作用，因为它再次修改了 DOM。

更高级的应用: 管理副作用

在实际项目中，管理副作用是非常重要的，因为它们可以使代码变得复杂难懂，也会影响程序的测试性和可维护性。为此，很多开发者会使用一些工具和库来管理副作用。

Redux-Saga 和 Redux-Observable

这些都是与 Redux 结合使用的中间件，专门用于处理副作用。

• Redux-Saga 使用生成器函数（generator functions）来描述副作用。
• Redux-Observable 则是结合 RxJS 的威力，通过 Observable 链式调用处理副作用。

例如，使用 Redux-Observable 来处理上面用户登录系统中的情况：

import { ofType } from 'redux-observable';
import { ajax } from 'rxjs/ajax';
import { map, catchError, switchMap } from 'rxjs/operators';
import { of } from 'rxjs';

const loginEpic = action$ => action$.pipe(
    ofType('LOGIN_REQUEST'),
    switchMap(action =>
        ajax.post('/api/login', { username: action.username, password: action.password }).pipe(
            map(response => ({ type: 'LOGIN_SUCCESS', message: response.response.message })),
            catchError(error => of({ type: 'LOGIN_FAILED', error }))
        )
    )
);

在这个例子中，Redux-Observable 使用 RxJS 管道操作符来管理副作用处理。通过这样的方式，可以将副作用处理逻辑与主业务逻辑分离开，使代码更加清晰和易于测试。

探讨 RxJS 与副作用

在使用 RxJS 时还有一些技巧能够更好地管理副作用。

使用 tap 操作符

tap 操作符（之前称为 do 操作符）允许在流中插入副作用而不改变主流数据，它是 RxJS 中最常用的处理副作用的工具。

import { of } from 'rxjs';
import { tap, map } from 'rxjs/operators';

of(1, 2, 3).pipe(
    tap(value => console.log(`Side effect: ${value}`)),
    map(value => value * 2)
).subscribe(
    result => console.log(`Result: ${result}`)
);

上面的代码会首先输出副作用的日志，然后输出经过 map 操作符处理后的结果。

使用独立的副作用管理模块

在大型项目中，可以创建独立的模块专门管理副作用。这样可以统一管理副作用，简化主业务逻辑代码。

例如，定义一个单独的副作用处理模块：

// sideEffectManager.js
export const logSideEffect = (message) => {
    console.log(message);
}

export const httpSideEffect = (url, data) => {
    return fetch(url, {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(response => response.json());
}

在主代码中引入并使用这些副作用函数：

import { logSideEffect, httpSideEffect } from './sideEffectManager';
import { of } from 'rxjs';
import { tap, switchMap } from 'rxjs/operators';

of({ username: 'user', password: 'password' }).pipe(
    tap(data => logSideEffect(`Logging in user: ${data.username}`)),
    switchMap(data => httpSideEffect('/api/login', data))
).subscribe(
    result => console.log(`Login response: ${result.message}`)
);

通过这种方式，可以将副作用管理和业务逻辑更好地分离，使代码结构更加清晰。

结语

理解 Observable 调用 subscribe 后引起的副作用是掌握 RxJS 和响应式编程的一个重要部分。在实际开发中，适当的管理和处理副作用可以使代码更加清晰、可维护且容易测试。