Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

Question

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

I have a unique service dedicated to managing app configurations

class Configuration {
  get setting() {
    return dataStore.fetchSetting();
  }

  set setting(value) {
    dataStore.saveSetting(value);
  }
}

This configuration is linked to components through configuration.setting.

Due to the potentially expensive and asynchronous nature of retrieving settings from the storage, I am considering updating the getter/setter with an RxJS subject that can handle updates and reads from the storage efficiently.

My refactored version looks like this:

class Configuration {

  constructor() {
    this.settingSubject = new ReplaySubject(1);

    settingSubject.subscribe((value) => {
      dataStore.saveSetting(value);
    });

    this.setting$ = this.settingSubject
    .map(() => dataStore.fetchSetting())
    .publishReplay(1).refCount();
}

Now, I can use it as configuration.setting$ | async and update it using

configuration.settingSubject.next(newSetting)

. This method seems to have effectively cached the costly storage retrievals.

However, two issues have surfaced.

The first problem is that both the settingSubject subject and setting$ observable need to be publicly accessible for this operation, even though a subject was intended to act as both an observable and an observer.

Is there a way to convert setting$ into a single Subject property within the Configuration service, allowing it to be subscribed using subscribe(...) and updated with next(...)?

The second concern is about the synchronous behavior of the code.

How can we address this issue when dealing with promises returned by both datastore.retrieve and datastore.save?

javascript angular typescript rxjs

Answer 1

Answer №1

Your code seems to be functioning properly, so there may not be much need for suggestions. It appears that you could simplify your code by removing the use of this.foo$.

You can achieve the functionality of storing the latest value using a ReplaySubject. Unless you specifically require calling storage.get('foo') after every storage.set('foo', val);, it might not be necessary.

I have created a live demo with your code: http://plnkr.co/edit/pxjRQr6Q6Q7LzYb1oode?p=preview

Here is a simplified version of your code:

class Setting {

  constructor() {
    var storage = new Storage();

    this.fooSubject = new ReplaySubject(1);
    this.fooSubject.subscribe((val) => {
      storage.set('foo', val);
    });
  }

  get observable() {
    return this.fooSubject.asObservable();
  };

  store(val) {
    this.fooSubject.next(val);
  }
}

I have abstracted the use of a Subject by wrapping it with .asObservable() and providing a store() method for .next() call. An example usage would look like this:

let settings = new Setting();

settings.store('Hello');

settings.observable.subscribe(val => console.log(val));
settings.store('Hello 2');
settings.store('Hello 3');

settings.observable.subscribe(val => console.log(val));
settings.store('Hello 4');

Output in console:

Hello
Hello 2
Hello 3
Hello 3
Hello 4
Hello 4

Note that the ReplaySubject is not initialized with any value. Even if you call setting.fooSubject.next(newFoo) right after creating the ReplaySubject, it will still be stored again upon subscription with storage.set('foo', val);.

About the synchronous issue, although your code is asynchronous, it runs sequentially. If storage.get('foo') involves a time-consuming synchronous operation, consider moving it to a Web Worker due to JavaScript's single-threaded nature.

Answer 2

Your code seems to be functioning properly, so there may not be much need for suggestions. It appears that you could simplify your code by removing the use of this.foo$.

You can achieve the functionality of storing the latest value using a ReplaySubject. Unless you specifically require calling storage.get('foo') after every storage.set('foo', val);, it might not be necessary.

I have created a live demo with your code: http://plnkr.co/edit/pxjRQr6Q6Q7LzYb1oode?p=preview

Here is a simplified version of your code:

class Setting {

  constructor() {
    var storage = new Storage();

    this.fooSubject = new ReplaySubject(1);
    this.fooSubject.subscribe((val) => {
      storage.set('foo', val);
    });
  }

  get observable() {
    return this.fooSubject.asObservable();
  };

  store(val) {
    this.fooSubject.next(val);
  }
}

I have abstracted the use of a Subject by wrapping it with .asObservable() and providing a store() method for .next() call. An example usage would look like this:

let settings = new Setting();

settings.store('Hello');

settings.observable.subscribe(val => console.log(val));
settings.store('Hello 2');
settings.store('Hello 3');

settings.observable.subscribe(val => console.log(val));
settings.store('Hello 4');

Output in console:

Hello
Hello 2
Hello 3
Hello 3
Hello 4
Hello 4

Note that the ReplaySubject is not initialized with any value. Even if you call setting.fooSubject.next(newFoo) right after creating the ReplaySubject, it will still be stored again upon subscription with storage.set('foo', val);.

About the synchronous issue, although your code is asynchronous, it runs sequentially. If storage.get('foo') involves a time-consuming synchronous operation, consider moving it to a Web Worker due to JavaScript's single-threaded nature.

Answer 3

Answer №2

Creating a new subject with side effects can be easily achieved by extending the AnonymousSubject class, which is used in the Subject.create(...) factory method. The resulting subject will have properties called destination and source that store the original subject and observable.

class CustomSharedSubject extends AnonymousSubject {
    constructor() {
        const subject = new BehaviorSubject('');

        const observable = subject.asObservable()
        .mergeMap((value) => promisedStorage.get('custom'))
        .publishReplay(1)
        .refCount();

        super(subject, observable);
    }

    next(value): void {
        promisedStorage.set('custom', value)).then(
            () => this.destination.next(value),
            () => this.destination.error(value)
        );
    }
}

Answer 4

Creating a new subject with side effects can be easily achieved by extending the AnonymousSubject class, which is used in the Subject.create(...) factory method. The resulting subject will have properties called destination and source that store the original subject and observable.

class CustomSharedSubject extends AnonymousSubject {
    constructor() {
        const subject = new BehaviorSubject('');

        const observable = subject.asObservable()
        .mergeMap((value) => promisedStorage.get('custom'))
        .publishReplay(1)
        .refCount();

        super(subject, observable);
    }

    next(value): void {
        promisedStorage.set('custom', value)).then(
            () => this.destination.next(value),
            () => this.destination.error(value)
        );
    }
}

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

Answer №1

Answer №2

Similar questions

Showing or hiding components within ReactJS based on conditions from other components

What is the reason for not requiring checks with Union Types when utilizing a variable, yet necessitating them within a function?

Leveraging the Railway Pathway from the Google Maps API

What causes a Next.js App to crash when a prop is not defined in destructuring code?

What could be causing my jQuery script to malfunction?

Limiting the display of every item in Angular ngFor

Quickly send off an Angular 4 HTTP POST request and move on

Organize data in a table using a dropdown selection menu

Is there no body sent in the $.ajax post request?

Code error TS2345 occurs when assigning the argument of type '{ headers: HttpHeaders; }' to a parameter of type 'RequestOptionsArgs'. This indicates a mismatch in the type of data being passed, causing an

several javascript onclick event listeners for manipulating the DOM

Establishing the maximum width of a Vuetify expansion panel component

Customize your markers on Google Maps

Issue with Webstorm not automatically updating changes made to JavaScript files

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

Set the title attribute according to the content of the <p> tag

There seems to be an issue with the functionality of chrome.storage.local.set()

Please convert the code to async/await format and modify the output structure as specified

Tips for extracting information from an HTML table into a function using Google Apps Script

I am trying to set up an AJAX call in my index.html to connect to a React endpoint, but instead of accessing the intended page, I am getting