zoukankan      html  css  js  c++  java
  • [Angular] State provider solutions

    There are many ways to expose data to components, but based on different usecase, different solution has PROS & CONS.

    1. ShareReplay(1)

    PROS: ShareReplay(1) solves a problem which if you have multi subscribers, it will trigger API requests multi times if you don't have shareReplay(1) in place.

    CONS: data is static, not dynamic. If you want to add/remove/update the data, you have to fetch new data again.

    2. Subject as a service

    We can keep a local copy of data using BehaviorSubject. Everytime, we add/remove/update, will trigger subject update.

    PROS: Solve the problem for static data, now it is dynamic and it won't trigger multi API calls.

    CONS: It has race condition. If you try to add multi-times. it might happne that first request's response comes after second request's response. 

    3. NgRx (ComponentStroe)

    https://ngrx.io/guide/component-store

    ComponentStore vs Global store: https://ngrx.io/guide/component-store/comparison

    We need state for some components, it is not necessary add to global store.

    PROS: It handles race condition by using effect (you can define your approach by using concatMap, switchMap, mergeMap, exhaustMap)

    concatMap: is a good way to solve race condition.

    switchMap: only care new request, ignore old one

    exhaustMap: only care the current happening one,  ignore new ones during the period

    Performance it better, NgRx using select() with memorized function.

    CONS: Deep knowledge of RxJS and NgRx.

    Misc:

    tapResponse:

    From

    to

     

     

     Refer: 

    Filling the Gap in State with NgRx ComponentStore | Alex Okrushko | EnterpriseNG 2020

     

  • 相关阅读:
    jsp 表单回显
    jquery ajax
    锋利的jquery 事件 动画
    锋利的jquery DOM操作
    锋利的jquery
    JavaScript闭包
    oracle
    日期转化
    二分查找
    linux 常用命令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/15371235.html
Copyright © 2011-2022 走看看