RxJs: The art of updating a BehaviorSubject by concatenating the latest value with a new one

Question

RxJs: The art of updating a BehaviorSubject by concatenating the latest value with a new one

Within my Angular application, I am currently implementing a state management system using BehaviourSubject

This is what I have in my store file:

myStoreData = new BehaviourSubject([])

In my actions file, I have the following:

export const SAVE_DATA_IN_CONTEXT = '[User] Save user the incoming data';

Therefore, in the component, when necessary, the method to invoke is as follows:

click(newData){
  this.reducerService('SAVE_DATA_IN_CONTEXT' , newData)
}

My goal is to ensure that the data sent to the store (BehaviourSubject) does not replace the existing data but appends it to it:

The desired outcome should be:

Data to send to BehaviourSubject (array) = existing data (array of objects) + new data (object)

This is how my reducer looks, and here is what I have tried:

public dispatchAction(actionTag: string, newDataPayload: any | null): void {
    
    switch (actionTag) {
      case ActionsTags.SAVE_DATA_IN_CONTEXT :
        const newDataToSet = [...Stores.myStoreData.getValue() , ...newDataPayload ];
        Stores.myStoreData.next(newDataPayload);
        break;

}

I believe that using the getValue() method is not ideal, and I want to avoid using Stores.myStoreData.subscribe() due to potential unsubscription issues and repetitive subscriptions from the user click method.

I am seeking a better way to handle this process effectively, such as potentially changing the BehaviourSubject implementation.

Any suggestions?

javascript angular typescript rxjs observable

Answer 1

Answer №1

In response to the comments on your query, it is noted that specialized libraries exist for this task, which would be more efficient than starting from scratch.

However, if you are looking to gain insight through hands-on experience, let's proceed with developing the solution ourselves.

My suggestion would be to adopt a reactive programming approach and structure everything as streams. Create a minimal service layer for better organization and ease of use via dependency injection.

To implement reactivity, I would utilize a subject to handle actions. Subsequently, maintain the state within a stream using the following methodology:

const action$ = new Subject();

const state$ = action$.pipe(
  scan((state, action) => {
    switch (action.type) {
      case 'some_action':
        // todo: generate a new state
      default:
        state;
    }
  })
);

If you wish to encapsulate this functionality into a service, it can be achieved with the following code snippet:

@Injectable()
export class Store {
  private action$ = new Subject();

  public state$ = action$.pipe(
    scan((state, action) => {
      switch (action.type) {
        case 'some_action':
          // todo: generate a new state
        default:
          state;
      }
    }),
    shareReplay(1)
  );

  public dispatch(action): void {
    this.action$.next(action)
  }
}

Answer 2

In response to the comments on your query, it is noted that specialized libraries exist for this task, which would be more efficient than starting from scratch.

However, if you are looking to gain insight through hands-on experience, let's proceed with developing the solution ourselves.

My suggestion would be to adopt a reactive programming approach and structure everything as streams. Create a minimal service layer for better organization and ease of use via dependency injection.

To implement reactivity, I would utilize a subject to handle actions. Subsequently, maintain the state within a stream using the following methodology:

const action$ = new Subject();

const state$ = action$.pipe(
  scan((state, action) => {
    switch (action.type) {
      case 'some_action':
        // todo: generate a new state
      default:
        state;
    }
  })
);

If you wish to encapsulate this functionality into a service, it can be achieved with the following code snippet:

@Injectable()
export class Store {
  private action$ = new Subject();

  public state$ = action$.pipe(
    scan((state, action) => {
      switch (action.type) {
        case 'some_action':
          // todo: generate a new state
        default:
          state;
      }
    }),
    shareReplay(1)
  );

  public dispatch(action): void {
    this.action$.next(action)
  }
}

RxJs: The art of updating a BehaviorSubject by concatenating the latest value with a new one

Answer №1

Similar questions

Issue with displaying Bootstrap modal on top of another modal

I attempted to invoke a JavaScript function upon clicking an ASP button via the code behind, but unfortunately, it did not function as intended

Modifying the color of a non-active tab - Material UI Tabs

Error message: "wp is not defined" appears when using TinyMCE, Bootstrap Modal, and URL Parameter together

Discovering the total number of pages in a PDF generated using Puppeteer

The property 'enabled' is not a standard feature of the 'Node' type

Angular 9 Alert : TypeError: Unable to access property 'routes' as it is undefined

` `endless scrolling within reactjs` `

Jquery Deferred failing to activate done or when functions

Determine the presence of a particular set of values within an array of named objects stored in the browser's localStorage using JavaScript

Unique Timer with progress bar that resets only when the page is refreshed

Incorporating ng2-bootstrap into an Angular2 project with SystemJS starter template

The module could not be located: Issue: Unable to find 'vue-confirm-dialog'

How can you modify the color of a card in React by mapping through an array and evaluating its value?

Integrate a fresh component and include a hyperlink to the URL simultaneously

What is the process for creating a login page that redirects automatically?

Experience the auditory bliss with Javascript/Jquery Sound Play

A versatile Material UI paper that adjusts its dimensions dynamically

Implement the maskmoney library in your input fields

Applying a transparent layer to all slider images, with the exception of the one that is