Implementing a Data Store
Implement a data store in this lesson.
We'll cover the following...
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
:
Press + to interact
export interface CalendarFilterSubscriber {calendarFilterChanged(store: CalendarFilterStore): void}export class CalendarFilterStore {private static instance: CalendarFilterStorestatic 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] = falsethis.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 ...