재사용 가능한 상태 관리를 만드는 방법

한 번 코딩

많은 프레임워크로 작업하는 것을 좋아하거나 작업해야 하는 프로그래머라면 사용하는 모든 프레임워크에서 동일한 코드를 사용하고 그에 대한 구성을 수행하지 않고 복사하여 붙여넣기만 하면 됩니다.

- 우리가 다룰 주제

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. Angular의 서비스는 무엇입니까?

서비스는 서로 모르는 클래스 간에 정보를 공유할 수 있는 좋은 방법입니다. 서비스를 사용하면 다음을 수행할 수 있습니다.

앱의 모든 구성 요소에서 데이터 가져오기

Rxjs 연산자 및 기타 사용.....

상태 관리로 사용(지금 수행할 작업)

깨끗하고 아름다운 코드를 가지고

2. Rxjs가 필요한 이유

RxJS는 구성을 수행하지 않고 모든 프레임워크 또는 Pure Javascript와 함께 사용할 수 있습니다.

RxJS는 관찰 가능한 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 구성하기 위한 라이브러리입니다.

RxJS는 수학, 변환, 필터링, 유틸리티, 조건부, 오류 처리, 반응형 프로그래밍과 함께 사용할 때 삶을 쉽게 만들어주는 조인 범주에서 방대한 연산자 모음을 제공합니다.

3. 모든 프레임워크에서 작동하는 서비스를 만드는 방법.

다음 라이브러리를 설치합니다.

$ npm install rxjs 
// or
$ yarn add rxjs

모든 서비스를 포함할 폴더를 만듭니다. 일반적으로 이름을 지정합니다services.
src/srvices에 생성합니다. 어디서 생성하느냐는 중요하지 않습니다.

새 .ts 또는 .js 파일 생성

class CounterService {

    private static _instance: CounterService;

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

/////...code here

}


export const _CounterService=CounterService.Instance;

시스템 전체에서 작업을 조정하는 데 하나의 개체를 사용해야 하므로 여기서는 싱글톤 클래스를 만듭니다.

4. Rxjs를 이용한 상태 관리 방법.

귀하의 counter.ts 및 initial_state 선언

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;

기능:

구독하고 변경 사항을 관찰할 수 있도록 카운터store(BehaviorSubject)를 반환하는 함수를 작성합니다.

논리를 작성하십시오.

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;

5. React 컴포넌트에서 서비스를 사용하는 방법.

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;

작동 방식

as Observable에는 하나의 값이 있습니다. 구독되면 즉시 값을 방출하고 이 주제가 새 값을 얻을 때마다 값도 방출합니다.

참고: 구독을 취소하면 새로운 가치를 얻을 수 없습니다.
끝...

🤔 왜 Rxjs인가? 이 상태 관리를 사용하고 Redux 또는 Context 또는 Vuex를 떠나는 이유는 무엇입니까?

대답은 Rxjs를 API 서비스 및 상태 관리로 사용하는 경우 이 BehaviorSubject 또는 .ts 파일을 복사하여 사용하는 프레임워크에 관계없이 모든 프로젝트에 붙여넣을 수 있다는 것입니다.
구성이 필요하지 않습니다. 실제로 훌륭한 중앙 집중식 코드(API 호출 및 상태 관리가 모두 하나의 파일에 있음)를 갖게 됩니다.

유용한 링크 🔗

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