Utilizing rxjs for creating behavior similar to a Register

Question

Utilizing rxjs for creating behavior similar to a Register

As a beginner in rxjs and declarative programming, please forgive me if this question seems naive!

I am working with Typescript, attempting to create functionality similar to that of a digital register. I have two input boolean observables, A and B, as well as an output register O (also boolean).

Specifications:

O should initially be set to "false"
When B transitions from FALSE to TRUE, O should be updated with the current value of A
In all other cases, the current value of O should remain unchanged

My goal is to store the value of A when B becomes true, so that I can use it when B goes false again.

I came across this question, but I'm struggling to apply its answer to my specific scenario.

I believe I can utilize pairwise() on B to detect the transition from FALSE to TRUE (previousValue === false && currentValue === true), along with withLatestFrom to access the current value of A and update O accordingly.

However, I'm unsure how to retain/re-emit the current value of O in all other situations. It appears that there is no way, within a pipe operator defining Observable O, to reference its existing value.

typescript rxjs

Answer 1

Answer №1

To meet your requirements quickly, I have developed the following solution:

Initialize observables a$ and b$ as BehaviorSubject and ReplaySubject respectively.
- ```
a$: BehaviorSubject<string>
```
  : Emits either a default value or the last emitted value to subscribers (using a$.next()). If you need different behavior, you can change it by using ReplaySubject with buffer size 1 (emits the last value without a default) or Subject (does not transmit previous emissions to future subscribers).
- ```
b$: ReplaySubject<boolean>(1)
```
  : Transmits the most recent emitted value to future subscribers.
Define an Observable bTransformer$ that fulfills your requirements with the following operators:
- distinctUntilChanged - emits only when values of b$ change, e.g., from true to false or vice versa.
- pairwise - emits previous and current values as an array, such as [true, false] or [false, true].
- combineLatestWith(a$) - combines with the value of a$, for example, [[true, false], 'value of a'].
- filter - emits only when b$ changes from false to true.
- map - transmits the value of a$.
Create the output observable o$ - initialized with false using the startWith operator and emitting whenever bTransformer$ does.

Keep in mind that with the current setup, o$ will also emit each time a value is transmitted to a$ due to wiring it using the combineLatestWith$ operator.

Feel free to test the code snippet below:

// JavaScript code goes here

// Instantiate necessary RxJS elements
const { BehaviorSubject, ReplaySubject, combineLatestWith, distinctUntilChanged, pairwise, filter, startWith, map } = rxjs;

// Initialize Behavior Subject for 'a' and Replay Subject for 'b'
const a$ = new BehaviorSubject('value of a');
const b$ = new ReplaySubject(1);

// Create Transformation Observable 'bTransformer$'
const bTransformer$ = b$.pipe(
  distinctUntilChanged(),                
  pairwise(),                            
  combineLatestWith(a$),                 
  filter(([[bValueOld]]) => !bValueOld),
  map(([_, a]) => a)
);

// Setup Output Observable 'o$'
const o$ = bTransformer$.pipe(
  startWith(false)
);

// Functions to handle button clicks
function onClickB(value) {
  b$.next(value);
}

function emitValueA() {
  const value = document.getElementById('a-input').value;
  a$.next(value);
}

// Subscribe to 'o$'
o$.subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js"></script>

// HTML buttons and input field for testing
<button onclick="onClickB(true)">Emit true to b</button>
<button onclick="onClickB(false)">Emit false to b</button>
<br>
<br>
<input id="a-input"/>
<button onclick="emitValueA()">Emit value to a</button>

Answer 2

To meet your requirements quickly, I have developed the following solution:

Initialize observables a$ and b$ as BehaviorSubject and ReplaySubject respectively.
- ```
a$: BehaviorSubject<string>
```
  : Emits either a default value or the last emitted value to subscribers (using a$.next()). If you need different behavior, you can change it by using ReplaySubject with buffer size 1 (emits the last value without a default) or Subject (does not transmit previous emissions to future subscribers).
- ```
b$: ReplaySubject<boolean>(1)
```
  : Transmits the most recent emitted value to future subscribers.
Define an Observable bTransformer$ that fulfills your requirements with the following operators:
- distinctUntilChanged - emits only when values of b$ change, e.g., from true to false or vice versa.
- pairwise - emits previous and current values as an array, such as [true, false] or [false, true].
- combineLatestWith(a$) - combines with the value of a$, for example, [[true, false], 'value of a'].
- filter - emits only when b$ changes from false to true.
- map - transmits the value of a$.
Create the output observable o$ - initialized with false using the startWith operator and emitting whenever bTransformer$ does.

Keep in mind that with the current setup, o$ will also emit each time a value is transmitted to a$ due to wiring it using the combineLatestWith$ operator.

Feel free to test the code snippet below:

// JavaScript code goes here

// Instantiate necessary RxJS elements
const { BehaviorSubject, ReplaySubject, combineLatestWith, distinctUntilChanged, pairwise, filter, startWith, map } = rxjs;

// Initialize Behavior Subject for 'a' and Replay Subject for 'b'
const a$ = new BehaviorSubject('value of a');
const b$ = new ReplaySubject(1);

// Create Transformation Observable 'bTransformer$'
const bTransformer$ = b$.pipe(
  distinctUntilChanged(),                
  pairwise(),                            
  combineLatestWith(a$),                 
  filter(([[bValueOld]]) => !bValueOld),
  map(([_, a]) => a)
);

// Setup Output Observable 'o$'
const o$ = bTransformer$.pipe(
  startWith(false)
);

// Functions to handle button clicks
function onClickB(value) {
  b$.next(value);
}

function emitValueA() {
  const value = document.getElementById('a-input').value;
  a$.next(value);
}

// Subscribe to 'o$'
o$.subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js"></script>

// HTML buttons and input field for testing
<button onclick="onClickB(true)">Emit true to b</button>
<button onclick="onClickB(false)">Emit false to b</button>
<br>
<br>
<input id="a-input"/>
<button onclick="emitValueA()">Emit value to a</button>

Answer 3

Answer №2

Simplifying the process with a single stream and a register state variable.

Starting off by creating checkboxes to track actions A and B, and displaying output C.

A: <input type="checkbox" id="A" /><br />
B: <input type="checkbox" id="B" /><br />
<div id="C">false</div>

Fetching the elements using javascript.

const a: any = document.getElementById('A') as HTMLElement;
const b: HTMLElement = document.getElementById('B') as HTMLElement;
const c: HTMLElement = document.getElementById('C') as HTMLElement;

Using fromEvent and map, we listen for checkbox clicks and extract the checked property from the event using map.

const checkboxStream = (element: any) => {
  return fromEvent(element, 'input').pipe(
    map((event: any) => event?.target?.checked)
  );
};

Next step is listening for the input event and subscribing to events from B, as it triggers storing the checkbox value.

With a simple if condition, the register state (registerState) gets updated when b is true, otherwise it retains the current state.

let registerState = a.checked;
checkboxStream(b)
  .pipe(
    map((bChecked: Array<boolean>) => {
      if (bChecked) {
        registerState = a.checked;
      }
      return registerState;
    })
  )
  .subscribe((cChecked: boolean) => {
    c.innerText = cChecked.toString();
    console.log(cChecked);
  });

Check out the Stackblitz Demo

Answer 4

Simplifying the process with a single stream and a register state variable.

Starting off by creating checkboxes to track actions A and B, and displaying output C.

A: <input type="checkbox" id="A" /><br />
B: <input type="checkbox" id="B" /><br />
<div id="C">false</div>

Fetching the elements using javascript.

const a: any = document.getElementById('A') as HTMLElement;
const b: HTMLElement = document.getElementById('B') as HTMLElement;
const c: HTMLElement = document.getElementById('C') as HTMLElement;

Using fromEvent and map, we listen for checkbox clicks and extract the checked property from the event using map.

const checkboxStream = (element: any) => {
  return fromEvent(element, 'input').pipe(
    map((event: any) => event?.target?.checked)
  );
};

Next step is listening for the input event and subscribing to events from B, as it triggers storing the checkbox value.

With a simple if condition, the register state (registerState) gets updated when b is true, otherwise it retains the current state.

let registerState = a.checked;
checkboxStream(b)
  .pipe(
    map((bChecked: Array<boolean>) => {
      if (bChecked) {
        registerState = a.checked;
      }
      return registerState;
    })
  )
  .subscribe((cChecked: boolean) => {
    c.innerText = cChecked.toString();
    console.log(cChecked);
  });

Utilizing rxjs for creating behavior similar to a Register

Answer №1

Answer №2

Check out the Stackblitz Demo

Similar questions

Encountering an error when using Webpack ModuleFederationPlugin and HMR: "Undefined properties cannot be set"

Seeking assistance with producing results

Tips for creating a tailored Express.js request interface using Typescript efficiently

Angular2 error: "missing exported member 'bootstrap'"

Working with Vue.js and Axios: Extracting data from a nested Axios response

Having trouble with VueJS ref not preventing the default form action on submit?

Creating generic output types in TypeScript based on the input types

Creating mock objects with Jest

Is it possible to enable full screen window functionality in Angular 2 by simply clicking a button? Let's find out

What is the best way to utilize the features of component A within component B when they exist as separate entities

Angular does not propagate validation to custom form control ng-select

The most effective approach to creating linked observable subscriptions

Guide to removing selected value from a combobox in Angular

Passing an array of objects as properties in React components

What is the best way to employ TypeScript for passing parameters to JavaScript functions that utilize the arguments object?

Displaying svg files conditionally in a react native application

What causes the form to consistently show as invalid once it has been submitted?

Sinon - observing a spy that remains inactive, yet the test proceeds to enter the function

Utilizing ES6, accessing the first element of an array of objects

The functionality of Angular 6 Material Nested Tree is disrupted when attempting to use dynamic data