Angular 與 Component store實踐範例

2023-02-20 06:00:23

正文

我們知道，Angular 中因為有 service 和 rxjs 的存在，使得狀態管理在 Angular，並非必須。

一個 BehaviorSubject 就形成了最簡單的狀態管理：

將邏輯部分分離到 service

使用 Rxjs 將 service 中的邏輯部分，拆分為狀態和方法。Component subscribe state 來更新 view, 呼叫方法來修改 state。

我們知道，Angular 中可以使用 NgRx 提供的 store 來做狀態管理。NgRx store 跟 Redux 本質上是一樣的。多數時候，可能我們都覺得 Redux 太重了。而且強行將資料與 view 分離。

除了 ngrx store, ngrx 還提供了另外一種輕量級的狀態管理，component store。本質上它跟我們剛剛介紹的狀態管理模式是一致的，只是提供了一些介面方便我們使用。 NgRx - @ngrx/component-store

在定位上，可以參考 hooks 與 redux 的區分，Ngrx store 用來處理全域性狀態，Component Store 用來 component 內區域性的狀態管理使用。（Store 和 Component 擁有相同的生命週期）。當然，實際上使用下來，component store 也完全可以用來當作全域性的狀態管理來處理。

component store 的使用方法

我們可以看到，store 主要提供了三個方法：

select, 用來拆分 state
updater, 用來更新 state, 主要是無 effect 的 state 更新。
effect, 用來處理有 effect 的情況，呼叫 updater 的方法來更新資料。

我們可以看出來，這樣的介面設計跟 Mobx 或者 Vuex 是比較接近的。區別就是，因為 RxJS 的緣故，它的實現異常簡單。幾乎只是基於 behaviorSubject 包了一層殼。

有兩點還是值得一提的：

updater 和 effect 的方法引數可以同時接受 value 和 observable value, 這使得我們在操作一個 stream 的時候，可以直接將 stream 作為引數。

比如我們現在有一個方法 updateUserName: (string | Observable<strring>) => void;

使用的時候，我們可以直接呼叫：updateUserName('zhangsan')

有時候我們在 component 裡拿到的是一個 stream。

比如 form.valueChanges, 這時候我們就不需要手動 subscribe stream, 而是直接

updateUserName(form.valueChanges.pipe(map(form => form.userName)))

updater 和 effect 將 stream 作為引數後會自動 subscribe 並在 store 被銷燬的時候 unsubscribe, 這就意味著你不用再寫一堆手動 unsubscribe 的邏輯。

在 component 中使用

在 component 中使用也比較簡單：

將 component 中必要的資料投餵給 store, 一般來說是 input.
在 component 中呼叫 updater 或者 effect 返回的方法修改 state。
在 component 中 subscribe state 實現 view 層的渲染。

@Component({
  template: `...`,
  // ❗️MoviesStore is provided higher up the component tree
})
export class MovieComponent {
  movie$: Observable<Movie>;
  @Input()
  set movieId(value: string) {
    // calls effect with value.

Angular 與 Component store實踐範例

目錄

正文

將邏輯部分分離到 service

component store 的使用方法

在 component 中使用

熱門文章