Question

我是RxJS的新手，所以我为新手问题道歉。

我有一个本地javascript对象定义为：

const deleteLineEpic = (action$, store) =>
action$.ofType(DELETE_LINE_REQUEST)
    .flatMap((action) => Observable.merge(
                Observable.of(showModalYesNo('CONFIRM_DELETE')),
                action$.ofType(MODAL_YES_CLICKED).map(() =>
                    deleteLineFulfilled(action.line)
                )
                .takeUntil(action$.ofType(MODAL_NO_CLICKED))
           ));

我将每个属性绑定到输入控件，用户可以在其中更改值。我希望能够观察到这个对象，并在任何属性的值发生变化时捕获事件。

这可以通过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>

RxJS观察一个物体

1 个答案: