RxJS 在現(xiàn)在的前端用比較少，但是 RxJS 作為響應(yīng)式和函數(shù)式編程的集大成者，似乎被前端開發(fā)者遺忘，可能是學(xué)習(xí)難度大，可能是有更加方便的解決方案。

不是因為 Redux 更具有性價比，而是 RxJS 可以打開更大的 JS 生態(tài)空間

下面我們先回顧一下 Redux 是如何運作開始。

一、Redux 創(chuàng)建一個 Store 做了哪些事情？

以上是一個簡單的 Redux 的工作流。從 reducer 到視圖派發(fā)更新的整個流程

Redux 通常在單頁面應(yīng)用中，與React結(jié)合，他的基本使用流程。

• 定義 Reducer 函數(shù)
• 使用 createStore 函數(shù)傳入 Reducer 創(chuàng)建 store
• 訂閱函數(shù) store
• 派發(fā)類型更新數(shù)據(jù)。

以下是一個官網(wǎng)的例子：

import { createStore } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

let store = createStore(counterReducer)

store.subscribe(() => console.log(store.getState()))

store.dispatch({ type: 'counter/incremented' })
store.dispatch({ type: 'counter/decremented' })

創(chuàng)建一個 Redux 其實也是需要訂閱（subscribe）數(shù)據(jù)。才能使用 dispatch 來派發(fā)行為到 reducer 里面。

二、React Redux 與 React 結(jié)合

React Redux 是 React 官方與 Redux 結(jié)合，方便在 React 組件中使用 Redux。提供了：

• Provider 組件
• 鉤子函數(shù)
• ...

2.1）Redux 的難點

初學(xué) Redux 難點就是熟練根據(jù)自己的業(yè)務(wù)完成此流程。

2.2）中心化

Redux 是將數(shù)據(jù)集中到一個 store 庫，集中化數(shù)據(jù)管理，在大型項目中，你可能不想講數(shù)據(jù)集中化，Redux 在新的版本 Redux Toolkit 有了分片等功能開始彌補 Redux 的問題。

初學(xué) Redux 其實還是有一定難度的，需要靈活使用 reducer 與 dispatch, 還需要 React 進行結(jié)合。并且異步副作用在 Redux 中還不好處理。

2.3）異步任務(wù)處理

Redux 通常不能直接處理異步任務(wù)，通常配合

• Redux-thunk

• Redux-saga

對異步任務(wù)進行處理。基于以上我們知道了其實 Redux 其實也具有自己優(yōu)點和缺點。

三、RxJS 為什么可以替代 Redux ?

3.1）React 作為視圖層

類似于 React 和 Vue 等框架，雖然組件具有自己的狀態(tài)管理，但是在復(fù)雜數(shù)據(jù)關(guān)系時力不從心。于是演化出了 Redux 等數(shù)據(jù)層管理庫。但是 RxJS 本身基于事件流，擁有強大的處理數(shù)據(jù)流能力。與視圖層集合便擁有了強大的數(shù)據(jù)處理能力。

3.2）Redux 作為數(shù)據(jù)層

通過以上的簡介，可以理解 Redux 其實就是一個 store 作為數(shù)據(jù)層而存在。它通常具有有以下一些操作：

• 存儲數(shù)據(jù)
• 取出數(shù)據(jù)
• 改變數(shù)據(jù)
• 異步處理

3.3） RxJS 作為數(shù)據(jù)層可以這樣做

RxJS 是一個函數(shù)式和響應(yīng)式的 JavaScript, 自帶響應(yīng)式數(shù)據(jù)能力。

普通的可觀察對象，只產(chǎn)生一個可觀察對象數(shù)據(jù)。也沒有緩存數(shù)據(jù)的能力。明顯不好，但是 RxJS 實現(xiàn)了 Subject 系列，其中 BehaviorSubject 能夠自帶初始值，并且也有緩存能力，能夠?qū)崿F(xiàn)跨組件的訂閱數(shù)據(jù)。

BehaviorSubject 是實現(xiàn) Store 中狀態(tài)管理的最佳選擇。

四、一個簡單的 RxJS 實現(xiàn) Store

4.1）思考

我們要實現(xiàn)一個 Store，我們基于 class 和 React 的 hooks 進行設(shè)計。在 Store 需要考慮跨越組件和和跨越頁面的狀態(tài)管理設(shè)計。

• BehaviorSubject 行為主題具有函數(shù)數(shù)據(jù)和初始化能力，是作為狀態(tài)管理的最佳選擇

4.2）實現(xiàn)一個簡單的 Store

import { BehaviorSubject, type SubjectLike } from "rxjs";

export class Store {
  state$;
  constructor() {
    this.state$ = new BehaviorSubject({counter: 10 });
  }

  updateState(data: IState) {
    this.state$.next({ ...data });
  }

  getState(): SubjectLike<any> {
    return this.state$;
  }

  unsubscribe() {
    this.state$.unsubscribe()
  }
}

export const store = new Store()

這個 Store 也非常簡單，在構(gòu)造函數(shù)中創(chuàng)建行為主題，然后再 getState 中獲取狀態(tài)主題，已經(jīng)在 updateState 中使用 next 方法更新主題，最后在 unsubscribe 中取消訂閱。

這里我們實例化一個全局 store， 然后輸出，方便在全局使用。

4.3）基于 Store 封裝 hooks 方便在 React 組件中使用

import { store } from './store'

export function useStore() {
  const [data, setData] = useState<IState>({ counter: 0 })
 
  useEffect(() => {
    store.getState().subscribe((v: any) => {
      setData(!v ? { counter: 0 } : v);
    });

    return () => {
      store.unsubscribe()
    }
  }, [])

  const updateData = (data: IState) => {
    store.updateState({...data})
  }

  return [data, updateData]
}

注意: store 是設(shè)計考慮在全局使用的，意味著這里的 useStore 是具有跨越頁面和組件能力的。其中重要的方法 updateData 是通過在修改 Store 內(nèi)部的數(shù)據(jù)進行全局的狀態(tài)管理。

4.4）用法

export function Sub() {
  const [data, updateData] = useStore()

  return <div>
    counter {data.counter}
    <button onClick={() => updateData({
      counter: data.counter + 1
    })}>+</button>
  </div>
}

一個簡單的 Sub 組件中，直接調(diào)用 useStore 可以方便進行同步狀態(tài)管理和內(nèi)容更新。下面添加一個方法，用于處理異步任務(wù)。

4.5）添加異步方法

在 store 類中添加一個異步方法：

class Store {

/* 其他方法*/

// 添加異步管理
  asyncOperation(): Observable<any> {
    return of(/* Your async operation result */).pipe(
      switchMap((result) => {
        // 處理異步操作的結(jié)果，并更新狀態(tài)
        this.updateState({ counter: result });
        return of(result);
      }),
      catchError((error) => {
        // 處理錯誤
        console.error('Error in async operation:', error);
        return of(null);
      })
    );
  } 
}

asyncOperation 是一個 store 異步方法，使用 of 操作符，通過管道 switchMap 處理異步任務(wù)，并返回新的可觀察對象，然后使用 catchError 處理錯誤。

4.6) RxJS 作為狀態(tài)管理的優(yōu)點

• 可以借助強大的 RxJS 異步數(shù)據(jù)處理能力
• 配合 React hooks 可以磨平 RxJS 代碼層面對React代碼的入侵
• 熟悉 RxJS 的小伙伴，可以擁抱更加廣泛的 JS 生態(tài)
• 適合大型項目

4.7) 缺點

• 對新手并不友好
• RxJS 學(xué)習(xí)曲線比較高
• 不適合小型項目

五、小結(jié)

本文主要關(guān)注 RxJS 作為狀態(tài)管理的能力，通過實現(xiàn)一個簡單的 Store 配合 BehaviorSubject 與 React hooks 進行配合實現(xiàn)一個簡單的全局狀態(tài)管理方案。同時也給出了異步數(shù)據(jù)的處理方案。本文需要對 RxJS 和 React 以及 React 狀態(tài)管都比較熟悉，借助 RxJS 強大的異步數(shù)據(jù)流處理能力與 React hooks 結(jié)合，能夠很好的磨平 RxJS 客觀對象對React 組件代碼的入侵，在代碼層面也保持了簡潔。最后也希望本文能夠幫助到大家。

以上就是淺聊一下為什么能用RxJS取代Redux的詳細(xì)內(nèi)容，更多關(guān)于RxJS取代Redux的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論