URL Construction with RxJS

Question

URL Construction with RxJS

How can I efficiently create a urlStream using RxJS that incorporates multiple parameters?

var searchStream = new Rx.ReplaySubject(1);
var pageStream = new Rx.ReplaySubject(1);

var urlStream = new Rx.Observable.create((observer) => {
  //Looking to generate something like http://apiurl.com?page=page&search=search
});

I initially thought about using

Rx.Observable.merge(searchStream, pageStream);

, but it becomes unclear which parameter corresponds to each stream.

Utilizing the searchStream subject allows for its usage in various parts of the application with searchStream.onNext("my search") triggering data refresh. While examples featuring a single url parameter are common, there seems to be limited resources on handling multiple input streams simultaneously.

javascript system.reactive ecmascript-6 rxjs

Answer 1

Answer №1

Consider this approach:

var searchStream = ...
var pageStream = ...

var urlStream = Rx.Observable.combineLatest(searchStream, pageStream, (search, page) => {
  return baseUrl + `?search=${search}&page=${page}`;
})
.shareReplay(1);

It is advisable to avoid using Subjects directly for creating streams. The event triggering the parameter change could be easily encapsulated in an Observable instead.

For example, the search functionality could be linked to a text box where its change event is captured with fromEvent

//This will generate a stream that waits until the user stops typing
//for half a second before sending a request to update.
var searchStream = Rx.Observable.fromEvent($textbox, 'keyup')
    .map(e => e.target.value)
    .debounce(500);

Answer 2

Consider this approach:

var searchStream = ...
var pageStream = ...

var urlStream = Rx.Observable.combineLatest(searchStream, pageStream, (search, page) => {
  return baseUrl + `?search=${search}&page=${page}`;
})
.shareReplay(1);

It is advisable to avoid using Subjects directly for creating streams. The event triggering the parameter change could be easily encapsulated in an Observable instead.

For example, the search functionality could be linked to a text box where its change event is captured with fromEvent

//This will generate a stream that waits until the user stops typing
//for half a second before sending a request to update.
var searchStream = Rx.Observable.fromEvent($textbox, 'keyup')
    .map(e => e.target.value)
    .debounce(500);

URL Construction with RxJS

Answer №1

Similar questions

Tips for optimizing large image files on a basic HTML, CSS, and JavaScript website to improve site speed and ensure optimal loading times

Utilizing CakePHP 3.0 with jQuery UI for an autocomplete feature

What is the method to include a CoffeeScript file in my project?

Is there a way to customize Angular's number filter?

What is the best way to run tests on this asynchronous function using Jasmine?

Using the dot operator to load an image

Due to high activity on the main thread, a delay of xxx ms occurred in processing the 'wheel' input event

instructions for creating a hover effect where one div vanishes when hovering over another div

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

Minimize the cyclomatic complexity of a TypeScript function

What is the outcome of XmlHttpRequest.responseText?

How can I remove the div container every time the submit button is clicked?

JavaScript code for downloading data through AJAX and then loading a chart is not functioning as expected

Filtering in AngularJS can be done by combining two fields at

The ng-model directive in drop-down selection elements

The useCallback hooks persist outdated values when the list is refreshed

Improving the efficiency of JSON data retrieval in JavaScript

Having trouble with my router in the express app - the .find and .findByID methods are not working properly. Also,

Mastering the Art of Parsing Complex JSON Data

@ngrx effects ensure switchmap does not stop on error