RxJSはオブジェクトを観察します

Question

私はRxJSを初めて使っていますので、初心者の質問には謝ります。

ように私は定義されたローカルのJavaScriptオブジェクトを持っている：私は、ユーザが値を変更することができ、入力コントロールに各プロパティを結合してい

model.user = { 
 
    firstName: 'John', 
 
    lastName: 'Smith' 
 
}

。私はこのオブジェクトを観察し、プロパティの値が変化したときにイベントをキャプチャしたいと考えています。

これはRxJSで達成できますか？

ありがとうございました。

Answer 1

オブジェクトを使用する代わりに、状態全体をObservableとして保存することができます。ここで

は、サンプルコード（人々はReduxの中で何に似たもの）である：

var fnameInput = document.getElementById('fname'); 
 
var lnameInput = document.getElementById('lname'); 
 
var jsonPre = document.getElementById('json'); 
 

 
var onFirstName$ = Rx.Observable.fromEvent(fnameInput, 'input'); 
 
var onLastName$ = Rx.Observable.fromEvent(lnameInput, 'input'); 
 

 
var initialState = { 
 
    firstName: '', 
 
    lastName: '', 
 
}; 
 

 
var state$ = Rx.Observable 
 
    .merge(
 
    onFirstName$ 
 
     .map(e => 
 
     state => Object.assign(
 
      state, 
 
      { firstName: e.target.value } 
 
     ) 
 
    ), 
 
    onLastName$ 
 
     .map(e => 
 
     state => Object.assign(
 
      state, 
 
      { lastName: e.target.value } 
 
     ) 
 
    ) 
 
) 
 
    .scan(
 
    (state, makeNew) => makeNew(state), 
 
    initialState 
 
) 
 
    .startWith(initialState); 
 

 
state$ 
 
    .subscribe(state => { 
 
    jsonPre.innerHTML = JSON.stringify(state, null, 2); 
 
    });

<input id="fname" type="text"> 
 
<input id="lname" type="text"> 
 
<pre id="json"></pre> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>