notificationsStore.js

import { observable, action, computed } from "mobx";

export class NotificationsStore {
  constructor(notifications) {
    this.notifications = [...notifications];
  }

  // Observers will be notified and react to changes
  // in properties which have @observable decorator.
  @observable
  notifications = [];

  // @action decorator should be used on functions
  // that modify state. In a real app, this function could be called
  // e.g. on SignalR event.
  // Observers will be notified when new notification is created
  @action
  add(notification) {
    this.notifications.push(notification);
  }

  // 'remove' function also modifies the state,
  // that's why it should has @action decorator.
  @action
  remove(removedNotification) {
    this.notifications = this.notifications.filter(
      notification => notification.id !== removedNotification.id
    );
  }
}