Redux와 RxJS, 어떤 유사점?

Redux와 RxJS, 어떤 유사점?

---

저는 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 : 상태 관리에 사용되는 Flux 영감 라이브러리 .

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

I also think about skipping react and go with snabbdom or something else until React handles reactive states better. Why should we build our state upwards just to break it down via props again? So I will try to make a version 2 of this pattern with Snabbdom.

Here's a more advanced but small snippet where the state.ts file builds the state stream. This is the ajax-form component's state which gets an object of fields (inputs) with validation rules and css styles. In this file we just use the field names (object keys) to combine all the children's states into the form state.

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
  }
}

While the code might not say much in isolation, it shows how you can build state upwards, and how you can produce dynamic events with ease. The price to pay is that you need to understand a different style of code. And I love to pay that price.

---

Redux is a just a state management library coming with well defined standards for update operations. As far as you stick with the standards you can keep your data flow sane and easy to reason. It also brings the ability to enhance the data flow with middlewares and store enhancers.

RxJS is a toolkit for reactive programming. You can actually think of every thing happening in your app as a stream. RxJS gives a very rich tool set to manage those streams.

Where RxJS and Redux intercepts? In redux you update your state with actions and obviously these actions can be treated as streams. Using a middleware like redux-observable (you don't have to) you can implement your so called "business logic" in a reactive way. Another thing is that you can create an observable from your redux store which sometimes might be easier than using an enhancer.

참고URL : https://stackoverflow.com/questions/34497343/redux-rxjs-any-similarities