[javascript] Redux와 RxJS, 어떤 유사점?

Program / 글쓴이

저는 Redux가 Flux의 더 나은 “구현”이라는 것을 알고 있습니다. 또는이를 단순화하기위한 재 설계 (애플리케이션 상태 관리)라고 말하는 것이 좋습니다.

반응 형 프로그래밍 (RxJS)에 대해 많이 들었지만 아직 배우지 않았습니다.

그래서 제 질문은이 두 기술 사이에 어떤 공통점이 있습니까? 아니면 상호 보완 적입니까? … 아니면 완전히 다른가요?

답변

요컨대, 그들은 매우 다른 목적을 위해 매우 다른 라이브러리이지만 예, 모호한 유사점이 있습니다.

Redux는 애플리케이션 전체에서 상태를 관리하기위한 도구입니다. 일반적으로 UI의 아키텍처로 사용됩니다. Angular의 (절반) 대안으로 생각하십시오.

RxJS는 반응 형 프로그래밍 라이브러리입니다. 일반적으로 JavaScript에서 비동기 작업을 수행하는 도구로 사용됩니다. 약속의 대안으로 생각하십시오.

리 액티브 프로그래밍은 데이터 변화가 멀리서 관찰되는 패러다임 (작업 및 사고 방식) 입니다. 데이터는 멀리서 변경 되지 않습니다 .

다음은 거리에서 변경된 예입니다 .

// In the controller.js file
model.set('name', 'George');

모델 변경 컨트롤러에서.

다음은 멀리서 관찰 한 예입니다 .

// logger.js
store.subscribe(function (data) {
    console.log(data);
});

Logger에서는 Store에서 (먼 거리에서) 발생하는 데이터 변경 사항을 관찰하고 콘솔에 씁니다.

Redux는 Reactive 패러다임을 약간 사용합니다. Store는 반응 적입니다. 멀리서 내용을 설정하지 않습니다. 그것이 store.set()Redux에 없는 이유 입니다. 스토어는 멀리서 행동을 관찰하고 스스로 변화합니다. 그리고 Store는 다른 사람들이 멀리서도 데이터를 관찰 할 수 있도록합니다.

RxJS는 또한 Reactive 패러다임을 사용하지만 아키텍처가 아닌 이 “원거리 관찰”패턴을 달성하기 위해 기본적인 빌딩 블록 인 Observables를 제공합니다 .

결론적으로, 다른 목적을 위해 매우 다른 것들이 있지만 몇 가지 아이디어를 공유하십시오.

답변

그들은 매우 다른 것들입니다.

RxJS는 리 액티브 프로그래밍을 수행하는 데 사용할 수 있으며 250 명 이상의 운영자가있는 매우 철저한 라이브러리입니다.

그리고 Redux는 github repo “Redux는 JavaScript 앱을위한 예측 가능한 상태 컨테이너”에 설명되어 있습니다.

Redux는 앱에서 상태를 처리하는 도구 일뿐입니다. 그러나 이에 비해 RxJS만으로 전체 앱을 빌드 할 수 있습니다.

도움이 되었기를 바랍니다 🙂

답변

Redux 는 업데이트 작업에 대해 잘 정의 된 표준과 함께 제공되는 상태 관리 라이브러리입니다. 표준을 고수하는 한 데이터 흐름을 정상적이고 추론하기 쉽게 유지할 수 있습니다. 또한 미들웨어 및 스토어 인핸서를 사용하여 데이터 흐름을 향상시키는 기능을 제공합니다.

RxJS 는 반응 형 프로그래밍을위한 툴킷입니다. 실제로 앱에서 일어나는 모든 일을 스트림으로 생각할 수 있습니다. RxJS는 이러한 스트림을 관리하기위한 매우 풍부한 도구 세트를 제공합니다.

RxJS와 Redux가 가로채는 곳은 어디입니까? redux에서는 액션으로 상태를 업데이트하고 분명히 이러한 액션을 스트림으로 취급 할 수 있습니다. redux-observable (필요하지 않음)과 같은 미들웨어를 사용하여 소위 “비즈니스 로직”을 반응 적으로 구현할 수 있습니다. 또 다른 한 가지는 redux 저장소에서 관찰 가능 항목을 만들 수 있다는 것입니다.

답변

간단히 말하면 :

Redux : 상태 관리에 사용되는 Flux 영감 라이브러리 .

RxJS : “Streams”(Observables 등)를 처리하는 데 사용되는 반응 형 프로그래밍 철학에 기반한 또 다른 Javascript 라이브러리입니다. [스트림 개념을 이해하기 위해 반응 형 프로그래밍에 대해 읽어보십시오].

답변

Redux에서 영감을 얻은 RxJS 코드를 만들 때와 약간의 실용적인 차이점을 추가하고 싶었습니다.

각 작업 유형을 Subject 인스턴스에 매핑했습니다. 각 상태 저장 구성 요소에는 감속기 함수로 매핑되는 주제가 있습니다. 모든 감속기 스트림은 결합 된 merge다음 scan상태 를 출력합니다. 기본값 startWith은 scan. 나는 publishReplay(1)상태를 위해 사용 했지만 나중에 제거 할 수 있습니다.

반응 순수 렌더링 기능은 모든 생산자 / 주제를 전송하여 이벤트 데이터를 생성하는 위치에만 있습니다.

하위 구성 요소가있는 경우 해당 상태가 자신의 상태로 결합되는 방식을 설명해야합니다. combineLatest좋은 출발점이 될 수 있습니다.

구현의 주목할만한 차이점 :

  • 미들웨어가 없으며 rxjs 연산자 만 있습니다. 이것이 가장 큰 힘이자 약점이라고 생각합니다. 여전히 개념을 빌릴 수는 있지만 redux 및 cycle.js와 같은 자매 커뮤니티의 도움을받는 것은 또 다른 맞춤형 솔루션이기 때문에 어렵습니다. 그래서이 텍스트에서 “우리”대신 “나”를 써야합니다.

  • 액션 유형에 대한 스위치 / 케이스 또는 문자열이 없습니다. 액션을 더 역동적으로 분리하는 방법이 있습니다.

  • rxjs는 다른 곳에서 도구로 사용할 수 있으며 상태 관리에 포함되지 않습니다.

  • 작업 유형 (?)보다 생산자가 적습니다. 나는 이것에 대해 잘 모르겠지만 자식 구성 요소를 수신하는 부모 구성 요소에서 많은 반응을 가질 수 있습니다. 이는 덜 명령적인 코드와 덜 복잡함을 의미합니다.

  • 솔루션을 소유합니다. 프레임 워크가 필요하지 않습니다. 좋은것과 나쁜 것. 어쨌든 자신의 프레임 워크를 작성하게됩니다.

  • 훨씬 더 프랙탈 적이며 하위 트리 또는 앱 상태 트리의 여러 부분에서 변경 사항을 쉽게 구독 할 수 있습니다.

    • redux-obseravble이하는 것처럼 서사시를하는 것이 얼마나 쉬운 지 생각해보세요. 정말 쉽습니다.

또한 하위 구성 요소가 스트림으로 설명되는 훨씬 더 큰 이점을 위해 노력하고 있습니다. 즉, 컴포넌트 구조를 기반으로 상태를 재귀 적으로 결합 ( “그냥”) 할 수 있기 때문에 리듀서에서 부모와 자식 상태를 컴파일 할 필요가 없습니다.

또한 React가 반응 상태를 더 잘 처리 할 때까지 반응을 건너 뛰고 snabbdom 또는 다른 것으로 이동하는 것에 대해 생각합니다. props를 통해 다시 분해하기 위해 상태를 위로 만들어야하는 이유는 무엇입니까? 그래서 Snabbdom으로이 패턴의 버전 2를 만들려고합니다.

다음은 state.ts 파일이 상태 스트림을 빌드하는 더 고급이지만 작은 스 니펫입니다. 이것은 유효성 검사 규칙 및 CSS 스타일을 사용하여 필드 (입력) 개체를 가져 오는 ajax 양식 구성 요소의 상태입니다. 이 파일에서는 필드 이름 (객체 키)을 사용하여 모든 하위 상태를 양식 상태로 결합합니다.

export default function create({
  Observable,
  ajaxInputs
}) {
  const fieldStreams = Object.keys(ajaxInputs)
  .map(function onMap(fieldName) {
    return ajaxInputs[fieldName].state.stream
    .map(function onMap(stateData) {
      return {stateData, fieldName}
    })
  })

  const stateStream = Observable.combineLatest(...fieldStreams)
  .map(function onMap(fieldStreamDataArray) {
    return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) {
    acc[fieldStreamData.fieldName] = fieldStreamData.stateData
    return acc
  }, {})
  })

  return {
    stream: stateStream
  }
}

코드가 개별적으로 많이 말하지 않을 수도 있지만 상태를 상향으로 구축하는 방법과 동적 이벤트를 쉽게 생성 할 수있는 방법을 보여줍니다. 지불해야 할 대가는 다른 스타일의 코드를 이해해야한다는 것입니다. 그리고 나는 그 대가를 치르는 것을 좋아합니다.

답변