Implementing a Data Store
Implement a data store in this lesson.
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 ...