Search⌘ K
Home
Courses
Modern Front-end Development for Rails

Implementing a Data Store

Explore how to implement a singleton data store in Stimulus using TypeScript that manages calendar filter states and notifies subscribers. Understand how to create controllers for filter toggling, day display, and a select-all feature, improving state management in Rails front-end apps.

We'll cover the following...

Creating the data store object

The centerpiece of this implementation is the data store object itself, which I’m calling the CalendarFilterStore:

TypeScript 3.3.4
export interface CalendarFilterSubscriber {
  calendarFilterChanged(store: CalendarFilterStore): void
}
export class CalendarFilterStore {
  private static instance: CalendarFilterStore
  static store(): CalendarFilterStore {
    if (!CalendarFilterStore.instance) {
      CalendarFilterStore.instance = new CalendarFilterStore()
    }
    return CalendarFilterStore.instance
  }
  filterStates: { [key: string]: boolean }
  subscribers: CalendarFilterSubscriber[]
  private constructor() {
    this.filterStates = {}
    this.subscribers = []
  }
  addSubscriber(subscriber: CalendarFilterSubscriber): void {
    this.subscribers.push(subscriber)
  }
  calendarFilterChanged() {
    this.subscribers.forEach(subscriber =>
      subscriber.calendarFilterChanged(this)
    )
  }
  addFilter(dateString: string): void {
    this.filterStates[dateString] = false
    this.calendarFilterChanged()
  }
  toggleDateStatus(dateString: string): void {
    if (!(dateString in this.filterStates)) {
      return
    }
    this.filterStates[dateString] = !this.filterStates[dateString]
    this.calendarFilterChanged()
  }
  clearAll(): void {
    for (const state in this.filterStates) {
      this.filterStates[state] = false
    }
    this.calendarFilterChanged()
  }
}

To start, we need to declare a TypeScript interface for subscribers to this store that has one method, calendarFilterChanged.

Then we get to the actual CalendarFilterStore class. We start there by making it a singleton in the same way we did for our code that fetched sold-out data in the ...