再利用可能な状態管理の方法

コード一度

あなたが多くのフレームワークで動作するのが好きであるか、そうする必要があるプログラマーであるならば、それはあなたが使用するどんなフレームワークででも同じコードを使用するために驚くべきで、それのためのどんな構成もなしで、ちょうどコピーして、ペーストします.

我々がカバーする話題

1. What are Services in Angular?
2. why Rxjs ?
3. How to Create Service that works in any farmework.
4. How to make state Management using Rxjs.
5. How to use Service in React component.

1 .角度でのサービスは？

サービスは、お互いを知らないクラスの間で情報を共有する素晴らしい方法です.サービスを使用すると、次のようになります.

取得データは、アプリケーション内の任意のコンポーネントをフォーム

Rxjs演算子などを使用します.

国家管理として使用してください

きれいで美しいコードを

なぜRXJS

RXJSは任意のフレームワークや純粋なJavaScriptと任意の設定を行うことなく使用することができます.
rxjsは観測可能なシーケンスを用いて非同期でイベントベースのプログラムを構成するためのライブラリである.
RXJs数学的な、変換、フィルタリング、ユーティリティ、条件、エラー処理の演算子の巨大なコレクションを提供し、ライフスタイルを簡単に反応するプログラミングで使用するカテゴリに参加します.

3 .任意の農場で働くサービスを作成する方法。

次のライブラリをインストールします

$ npm install rxjs 
// or
$ yarn add rxjs

すべてのサービスを含むフォルダを作成するservicesとsrc/srviceで作成します.それはあなたがそれを作成する問題ではない.

クリエイト.ts or .js ファイル名を付けますcounter.ts (ここではタイプスクリプトを使っているので)

class CounterService {

    private static _instance: CounterService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

/////...code here

}


export const _CounterService=CounterService.Instance;

そこで、ここでは1つのオブジェクトを使用してシステム全体のアクションを調整する必要があります.

RXJSを用いた状態管理の作り方

あなたのinitial_state and store(BehaviorSubject)

import { BehaviorSubject } from "rxjs";

class CounterService {

    private static _instance: CounterService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

    private initial_state:number=5;

    private Counter = new BehaviorSubject<number>(this.initial_state);


}


export const _CounterService=CounterService.Instance;

関数:

カウンタを返す関数を書き込むas Observable だから、それを購読することができます任意の変更を観察する.

あなたの論理を書きなさい.

import { BehaviorSubject, Observable } from "rxjs";

class CounterService {

    private static _instance: CounterService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

    private initial_state:number=5;

    private Counter = new BehaviorSubject<number>(this.initial_state);

//step 1
  Counter():Observable<number>{
        return this.Counter.asObservable();
      }

//step 2
increment():void{
this.Counter.next(this.Counter.getValue()+1);
}

decrement():void{
this.Counter.next(this.Counter.getValue()-1);
}

incrementBy(i:number):void{
this.Counter.next(this.Counter.getValue()+i);
}


}


export const _CounterService=CounterService.Instance;

Responseでサービスを使用する方法。

import { useEffect, useState } from "react";
import { Subscription } from "rxjs";
import { _CounterService } from "src/services/Counter.Service";

const Index = () => {

// create Subscription array to push any Subscription we do
  let Subs:Subscription[]=[];

  const [counter, setcounter] = useState<number>();

const increment=()=>_CounterService.increment();

const decrement=()=>_CounterService.decrement();

const incrementBy=(i:number)=>_CounterService.incrementBy(i);


  useEffect(() => {

//push it to Subs to unsubscribe on component destroy 
Subs.push(
_CounterService.Counter()
.subscribe({ next: (res) => counter(res) }));

//to prevent any memory leak 
    return () =>Subs.forEach(e=>e.unsubscribe())
  }, []);

  return (
    <div>
the Counter is {{counter}}

<button onClick={()=>increment()}>increment</button>
<button onClick={()=>decrement()}>decrement</button>
<button onClick={()=>incrementBy(5)}>increment By 5</button>


    </div>
  );
};

export default Index;

動作方法

The BehaviorSubject 値を保持します.それが購読されるとき、それはすぐに、そして、この主題が新しい価値を得るたびに、それはそれを発します.
注:あなたがそれを取り消すならば、あなたはどんな新しい価値も得ません
終わり
あなたは不思議かもしれない🤔 なぜRxjs?なぜこの状態管理を使用してreduxまたはコンテキストまたはVuexを残すか?
あなたがRXJをAPIサービスとして使うならば、答えはそうです.ts or .js ファイルとどのようなフレームワークを使用して任意のプロジェクトに貼り付けます.
設定は必要ありません.本当に集中したコード(あなたのAPI呼び出しと1つのファイルであなたの州管理)を持っています

便利なリンク🔗

https://rxjs.dev/guide/subject#behaviorsubject