使用 RxJS 在 React 中進行反應式編程

教學

JavaScript

ReactJS 已成為建構動態和響應式使用者界面的首選庫。然而，隨著應用程式的成長，管理異步數據流變得更具挑戰性。進入 RxJS，這是一個使用 observables 進行反應式編程的強大庫。RxJS 運算子簡化了處理複雜異步數據流，使您的 React 組件更易管理和高效。

在本文中，我們將探索 RxJS 運算子在 ReactJS 上下文中的應用。我們將逐步演示示例，展示如何將 RxJS 整合到您的 React 應用程式中。通過本指南的最後，您將對 RxJS 運算子有牢固的理解，以及它們如何增強您的 ReactJS 專案。

RxJS 是什麼？

RxJS，或稱為 JavaScript 的 Reactive Extensions，是一個庫，允許您使用 observables 處理異步數據流。observable 是隨著時間到達的集合，使您能夠高效地對數據變化做出反應。

但為什麼在 ReactJS 中使用 RxJS？ReactJS 本質上是具有狀態並處理 UI 渲染。整合 RxJS 可讓您更輕鬆且可預測地處理複雜的異步操作，如 API 呼叫、事件處理和狀態管理。

為什麼應該在 ReactJS 中使用 RxJS？

改進異步處理

在 ReactJS 中，處理 API 呼叫或使用者事件等異步操作可能變得繁瑣。RxJS 運算子，如 map、filter 和 debounceTime，讓您優雅地管理這些操作，隨著數據流在應用程式中傳播時進行轉換。

更清潔和易讀的程式碼

RxJS 推崇函數式編程方法，使您的程式碼更具聲明性。您可以利用 RxJS 運算子來簡潔地處理狀態變化和副作用，而不是手動管理狀態變化和副作用。

增強的錯誤處理

RxJS 提供強大的錯誤處理機制，讓您能夠優雅地管理異步操作中的錯誤。像 catchError 和 retry 這樣的運算子可以自動從錯誤中恢復，而不用在程式碼中加入 try-catch 區塊。

在 ReactJS 項目中設置 RxJS

在深入程式碼之前，讓我們首先設置一個帶有安裝 RxJS 的基本 ReactJS 項目。

JavaScript

npx create-react-app rxjs-react-example

cd rxjs-react-example

npm install rxjs

安裝 RxJS 後，您就可以開始將其整合到您的 React 元件中。

逐步示例

讓我們通過在 ReactJS 應用中使用 RxJS 的詳細示例來進行演示。我們將創建一個從 API 擷取數據並在列表中顯示的簡單應用程式。我們將使用 RxJS 運算子來高效地處理異步數據流。

步驟 1: 創建簡單的 React 元件

首先，創建一個名為 DataFetcher.js 的新元件:

JavaScript

import React, { useEffect, useState } from 'react';

​

const DataFetcher = () => {

const [data, setData] = useState([]);

const [error, setError] = useState(null);

​

return (

<div>

<h1>Data Fetcher</h1>

{error && <p>Error: {error}</p>}

<ul>

{data.map(item => (

<li key={item.id}>{item.name}</li>

))}

</ul>

</div>

);

};

​

export default DataFetcher;

這個元件初始化了數據和錯誤的狀態變數。它渲染了從 API 擷取的數據列表，並優雅地處理錯誤。

步驟 2: 導入 RxJS 和創建 Observable

接下來，我們將導入 RxJS 並創建一個用於獲取數據的 observable。在同一 DataFetcher.js 檔案中，修改組件以包含以下內容：

JavaScript

import { of, from } from 'rxjs';

import { catchError, map } from 'rxjs/operators';

import { ajax } from 'rxjs/ajax';

​

const fetchData = () => {

  return ajax.getJSON('https://jsonplaceholder.typicode.com/users').pipe(

    map(response => response),

    catchError(error => of({ error: true, message: error.message }))

  );

};

在這裡，我們使用 RxJS 中的 ajax.getJSON 方法從 API 獲取數據。map 運算符轉換響應，catchError 處理任何錯誤，返回我們可以訂閱的 observable。

第 3 步：在 useEffect 中訂閱 Observable

現在，我們將使用 useEffect 鉤子來訂閱 observable 並相應地更新組件狀態：

JavaScript

useEffect(() => {

    const subscription = fetchData().subscribe({

    next: (result) => {

      if (result.error) {

          setError(result.message);

      } else {

        setData(result);

      }

    },

    error: (err) => setError(err.message),

  });

​

return () => subscription.unsubscribe();

}, []);

此代碼訂閱 fetchData observable。如果 observable 發出錯誤，它將更新錯誤狀態；否則，它將更新數據狀態。在組件卸載時清除訂閱以防止內存洩漏。

第 4 步：增強數據獲取過程

現在我們有了基本的實現，讓我們使用更多 RxJS 運算符來增強它。例如，我們可以添加一個加載狀態並延遲 API 調用以優化性能。

JavaScript

import {

    debounceTime,

    tap

} from 'rxjs/operators';

​

const fetchData = () => {

    return ajax.getJSON('https://jsonplaceholder.typicode.com/users').pipe(

        debounceTime(500),

        tap(() => setLoading(true)),

        map(response => response),

        catchError(error => of({

            error: true,

            message: error.message

        })),

        tap(() => setLoading(false))

    );

};

在這個增強版本中，debounceTime 確保只有在 500 毫秒的閒置後才進行 API 調用，減少不必要的請求。tap 運算符在 API 調用之前和之後設置加載狀態，為用戶提供視覺反饋。

RxJS 在 ReactJS 中的常見運算符及其使用方式

RxJS 提供了一系列在 ReactJS 應用中非常有用的運算符。以下是一些常見運算符及其使用方式：

map

map 操作符會轉換可觀察對象所發出的每個值。在 ReactJS 中，它可以用來在渲染到 UI 之前格式化數據。

JavaScript

const transformedData$ = fetchData().pipe(

  map(data => data.map(item => ({ ...item, fullName: `${item.name} (${item.username})` })))

);

filter

filter 操作符允許你過濾掉不符合某些條件的值。這對於向用戶顯示相關數據非常有用。

JavaScript

const filteredData$ = fetchData().pipe(

    filter(item => item.isActive)

);

debounceTime

debounceTime 會延遲可觀察對象的值的發出，使其非常適合處理用戶輸入事件，例如搜尋查詢。

JavaScript

const searchInput$ = fromEvent(searchInput, 'input').pipe(

  debounceTime(300),

  map(event => event.target.value);

);

switchMap

switchMap 非常適合處理只有最新可觀察結果重要的情況，例如自動完成建議。

JavaScript

const autocomplete$ = searchInput$.pipe(

    switchMap(query => ajax.getJSON(`/api/search?q=${query}`))

);

進階 RxJS 和 ReactJS 整合：利用更多操作符和模式

使用 merge 組合可觀察對象

有時，你需要同時處理多個異步流。merge 操作符允許你將多個可觀察對象合併為一個可觀察對象，隨著每個值的到來發出它們。

JavaScript

import {

    merge,

    of,

    interval

} from 'rxjs';

import {

    map

} from 'rxjs/operators';

​

const observable1 = interval(1000).pipe(map(val => `Stream 1: ${val}`));

const observable2 = interval(1500).pipe(map(val => `Stream 2: ${val}`));

​

const combined$ = merge(observable1, observable2);

​

useEffect(() => {

    const subscription = combined$.subscribe(value => {

        console.log(value); // Logs values from both streams as they arrive

    });

​

    return () => subscription.unsubscribe();

}, []);

在 React 應用中，你可以使用 merge 同時監聽多個事件或 API 請求，並以統一的方式處理它們。

實時數據流與 interval 和 scan

對於需要實時更新的應用，例如股票報價或實時儀表板，RxJS 可以有效地創建和處理數據流。

JavaScript

import { interval } from 'rxjs';

import { scan } from 'rxjs/operators';

​

const ticker$ = interval(1000).pipe(

scan(count => count + 1, 0)

);

​

useEffect(() => {

const subscription = ticker$.subscribe(count => {

console.log(`Tick: ${count}`); // Logs ticks every second

});

​

return () => subscription.unsubscribe();

}, []);

在這個例子中，scan 像一個 reducer，維護發出值的累積狀態。

進階用戶輸入處理與 combineLatest

對於複雜的表單或多個輸入字段互動的情況，combineLatest 運算子非常寶貴。

JavaScript

import {

    fromEvent,

    combineLatest

} from 'rxjs';

import {

    map

} from 'rxjs/operators';

​

const emailInput = document.getElementById('email');

const passwordInput = document.getElementById('password');

​

const email$ = fromEvent(emailInput, 'input').pipe(

    map(event => event.target.value)

);

const password$ = fromEvent(passwordInput, 'input').pipe(

    map(event => event.target.value)

);

​

const form$ = combineLatest([email$, password$]).pipe(

    map(([email, password]) => ({

        email,

        password

    }))

);

​

useEffect(() => {

    const subscription = form$.subscribe(formData => {

        console.log('Form Data:', formData);

    });

​

    return () => subscription.unsubscribe();

}, []);

這個例子監聽多個輸入字段並一起發出最新的值，簡化表單狀態管理。

使用 retryWhen 和 delay 進行重試邏輯

在網絡可靠性成為問題的情況下，RxJS 可以幫助實現帶有指數退避的重試機制。

JavaScript

import {

    ajax

} from 'rxjs/ajax';

import {

    retryWhen,

    delay,

    scan

} from 'rxjs/operators';

​

const fetchData = () => {

    return ajax.getJSON('https://api.example.com/data').pipe(

        retryWhen(errors =>

            errors.pipe(

                scan((retryCount, err) => {

                    if (retryCount >= 3) throw err;

                    return retryCount + 1;

                }, 0),

                delay(2000)

            )

        )

    );

};

​

useEffect(() => {

    const subscription = fetchData().subscribe({

        next: data => setData(data),

        error: err => setError(err.message)

    });

​

    return () => subscription.unsubscribe();

}, []);

這種方法最多重試 API 調用三次，每次之間有延遲，提高用戶在暫時失敗期間的體驗。

使用 startWith 顯示加載指示器

為了提供無縫的用戶體驗，您可以使用 startWith 運算子在數據可用之前顯示加載指示器。

JavaScript

import {

    ajax

} from 'rxjs/ajax';

import {

    startWith

} from 'rxjs/operators';

​

const fetchData = () => {

    return ajax.getJSON('https://jsonplaceholder.typicode.com/users').pipe(

        startWith([]) // Emit an empty array initially

    );

};

​

useEffect(() => {

    const subscription = fetchData().subscribe(data => {

        setData(data);

    });

​

    return () => subscription.unsubscribe();

}, []);

這確保 UI 顯示一個占位符或旋轉圖標，直到數據加載完成。

使用 takeUntil 進行可取消的請求

清理異步操作至關重要，特別是對於搜索或動態查詢。 takeUntil 運算子有助於取消 observables。

JavaScript

import {

    Subject

} from 'rxjs';

import {

    ajax

} from 'rxjs/ajax';

import {

    debounceTime,

    switchMap,

    takeUntil

} from 'rxjs/operators';

​

const search$ = new Subject();

const cancel$ = new Subject();

​

const searchObservable = search$.pipe(

    debounceTime(300),

    switchMap(query =>

        ajax.getJSON(`https://api.example.com/search?q=${query}`).pipe(

            takeUntil(cancel$)

        )

    )

);

​

useEffect(() => {

    const subscription = searchObservable.subscribe(data => {

        setData(data);

    });

​

    return () => cancel$.next(); // Cancel ongoing requests on unmount

}, []);

​

const handleSearch = (query) => search$.next(query);

在這裡，takeUntil 確保當輸入新查詢或組件卸載時取消任何正在進行的 API 調用。

常見問題

RxJS 和 Redux 有什麼區別？

RxJS 專注於使用 observables 管理異步數據流，而 Redux 是一個狀態管理庫。 RxJS 可以與 Redux 一起用於處理複雜的異步邏輯，但它們有不同的功能。

我可以在功能性組件中使用 RxJS 嗎？

是的，RxJS 與 React 的功能性組件能夠無縫配合。您可以使用像 useEffect 這樣的 hooks 來訂閱 observables 並管理副作用。

RxJS 對於小型 React 專案來說是否過度？

對於小型專案來說，RxJS 可能看起來有些多餘。然而，當您的專案逐漸擴大且需要處理複雜的異步數據流時，RxJS 可以簡化代碼並使其更易於維護。

如何在 ReactJS 中調試 RxJS？

可以使用像 Redux DevTools 或 RxJS 專用的日誌操作符，如 tap 來檢查不同階段傳遞的值來調試 RxJS 代碼。

如何優化處理高頻事件？

像 throttleTime 和 auditTime 這樣的操作符非常適合處理高頻事件，如滾動或調整大小。

RxJS 能否取代 React 狀態管理庫？

RxJS 不是一個狀態管理解決方案，但可以與像 Redux 這樣的庫結合處理複雜的異步邏輯。對於較小的項目，RxJS 配合 BehaviorSubject 有時可以取代狀態管理庫。

RxJS 在 ReactJS 中的最佳實踐是什麼？

在 useEffect 中使用 takeUntil 做清理以避免內存洩漏。
避免在簡單同步狀態更新時過度使用 RxJS；更優先使用 React 內建工具。
獨立測試 observables 以確保可靠性。

結論

RxJS 是在 ReactJS 應用程式中管理非同步資料的強大工具。使用 RxJS 運算子，您可以撰寫更乾淨、更有效率和更易維護的程式碼。了解並應用 RxJS 在您的 ReactJS 專案中將顯著提升您處理複雜非同步資料流的能力，使您的應用程式更具擴展性。

Source:
https://dzone.com/articles/reactive-programming-in-react-with-rxjs