Recommended to use Subject or not

Question

I am using Subject in my code and wondering if it is the recommended to do it in this way.

First of all, for what I am using the Subject is, when the toggle button got pressed, then other buttons will be set as inactive.

After edit got pressed:

Subject definition and subscriber implementation code:

  let oButtonSubject = new Rx.Subject();
  this._subscribeButtonState(oButtonSubject);

_subscribeButtonState: function (oButtonSubject) {
      let self = this;
      return oButtonSubject
        .subscribe(function (oBtnState) {
          let oModel = self.getModel("vmButtonsState");
          oModel.setProperty("/edit", oBtnState.bEdit);
          oModel.setProperty("/mass", oBtnState.bMass);
          oModel.setProperty("/save", oBtnState.bSave);
          oModel.setProperty("/cancel", oBtnState.bCancel);
        });
    },

The code above will set the state of buttons.

Every time, when the edit got pressed, the next method got called and push data to oButtonSubject.

_subscribeEditPressOb: function (oEditPressed, oButtonSubject) {
      let self = this;
      return oEditPressed
        .map(function (oSource) {
          return oSource;
        })
        .subscribe(function (oSource) {

            // Determine select state for the calendar.
            // The calendar is only allowed to select, if
            // EDIT button is clicked.
            if (oSource.getId().indexOf("cal-edit") >= 0 && oSource.getPressed()) {
              oButtonSubject.next({bEdit: true, bMass: false, bSave: false, bCancel: false});
            } else {
              oButtonSubject.next({bEdit: true, bMass: true, bSave: true, bCancel: true});
            }
          },
          function (err) {
            jQuery.sap.log.fatal(err);
          });
    },

The code above subscribe to the edit button when it got pressed, after push the data to the subject.

It is the right approach to use subject?

Answer 1

A Subject is meant as an entrance from the non-reactive world into the Rx world. In your case you are using a Subject to emit events based on click events on the edit button.

I would suggest you do not use a Subject for this specific implementation but use your clicks directly as a stream by using fromEvent

The following is an example (ignore the rough edges; it persists state in the DOM) (jsbin)

const editButton = document.getElementById('enable-edit-mode')
const saveChangesButton = document.getElementById('save-changes');
const cancelChangesButton = document.getElementById('cancel-save-changes');

const enableEditModeStream = Rx.Observable.fromEvent(editButton, 'click')
.do(() => {
  editButton.setAttribute('disabled','disabled')
  saveChangesButton.removeAttribute('disabled');
  cancelChangesButton.removeAttribute('disabled');
});

const saveChangesStream = Rx.Observable.fromEvent(saveChangesButton, 'click')
  .do(() => {
    console.log('saving changes')
  });
const cancelChangesStream = Rx.Observable.fromEvent(cancelChangesButton, 'click');

const saveCancelEditModeStream = Rx.Observable.merge(
  saveChangesStream,
  cancelChangesStream
)
.do(() => {
  editButton.removeAttribute('disabled');
  saveChangesButton.setAttribute('disabled','disabled')
  cancelChangesButton.setAttribute('disabled','disabled')
});


Rx.Observable.merge(
  enableEditModeStream,
  saveCancelEditModeStream
)
.subscribe();