move to TypedEvent

Author: JLarky

react-with-type-safe-flux/src/actions/GreetingActions.ts

@@ -1,27 +1,18 @@
-import {Event, AppDispatcher} from '../dispatcher/AppDispatcher';
+import {TypedEvent, AppDispatcher} from '../dispatcher/AppDispatcher';
 import GreetingActionTypes from '../constants/action-types/GreetingActionTypes';
 
-export interface AddGreetingEvent {type: string; payload: string;}
-export interface NewGreetingChanged {type: string; payload: string;}
-export interface RemoveGreeting {type: string; payload: string;}
+export class AddGreetingEvent extends TypedEvent<string> {}
+export class NewGreetingChanged extends TypedEvent<string> {}
+export class RemoveGreeting extends TypedEvent<string> {}
 
 export function addGreeting(newGreeting: string) {
-  AppDispatcher.dispatch({
-    payload: newGreeting,
-    type: GreetingActionTypes.ADD_GREETING
-  } as AddGreetingEvent);
+  AppDispatcher.dispatch(new AddGreetingEvent(newGreeting));
 }
 
 export function newGreetingChanged(newGreeting: string) {
-  AppDispatcher.dispatch({
-    payload: newGreeting,
-    type: GreetingActionTypes.NEW_GREETING_CHANGED
-  } as NewGreetingChanged);
+  AppDispatcher.dispatch(new NewGreetingChanged(newGreeting));
 }
 
 export function removeGreeting(greetingToRemove: string) {
-  AppDispatcher.dispatch({
-    payload: greetingToRemove,
-    type: GreetingActionTypes.REMOVE_GREETING
-  } as RemoveGreeting);
+  AppDispatcher.dispatch(new RemoveGreeting(greetingToRemove));
 }

react-with-type-safe-flux/src/dispatcher/AppDispatcher.ts

@@ -1,6 +1,10 @@
 import { Dispatcher } from 'flux';
 
-export type Event = {type: string; payload: any};
+export class TypedEvent<P> {
+  constructor(public payload: P) {}
+}
+
+export type Event = TypedEvent<any>;
 
 const dispatcherInstance: Flux.Dispatcher<Event> = new Dispatcher();
 

react-with-type-safe-flux/src/stores/GreetingStore.ts

@@ -7,23 +7,19 @@ import { AddGreetingEvent, RemoveGreeting, NewGreetingChanged } from '../actions
 class GreeterStore extends FluxStore<GreetingState> {
   constructor(dispatcher: Flux.Dispatcher<Event>) {
     const onDispatch = (action: Event) => {
-      switch(action.type) {
-        case GreetingActionTypes.ADD_GREETING:
-          let payload1 = (<AddGreetingEvent> action).payload;
-          this._state.newGreeting = '';
-          this._state.greetings = this._state.greetings.concat(payload1);
-          this.emitChange();
-          break;
-        case GreetingActionTypes.REMOVE_GREETING:
-          let payload2 = (<RemoveGreeting> action).payload;
-          this._state.greetings = this._state.greetings.filter(g => g !== payload2);
-          this.emitChange();
-          break;
-        case GreetingActionTypes.NEW_GREETING_CHANGED:
-          let payload3 = (<NewGreetingChanged> action).payload;
-          this._state.newGreeting = payload3;
-          this.emitChange();
-          break;
+      if (action instanceof AddGreetingEvent) {
+        const {payload} = action;
+        this._state.newGreeting = '';
+        this._state.greetings = this._state.greetings.concat(payload);
+        this.emitChange();
+      } else if (action instanceof RemoveGreeting) {
+        const {payload} = action;
+        this._state.greetings = this._state.greetings.filter(g => g !== payload);
+        this.emitChange();
+      } else if (action instanceof NewGreetingChanged) {
+        const {payload} = action;
+        this._state.newGreeting = payload;
+        this.emitChange();
       }
     }
     super(dispatcher, onDispatch, () => ({

react-with-type-safe-flux/test/stores/GreetingStore.tests.ts

@@ -1,5 +1,6 @@
 import GreetingStore from '../../src/stores/GreetingStore';
 import GreetingActionTypes from '../../src/constants/action-types/GreetingActionTypes';
+import { AddGreetingEvent, RemoveGreeting, NewGreetingChanged } from '../../src/actions/GreetingActions';
 
 const registeredCallback = GreetingStore._onDispatch.bind(GreetingStore);
 
@@ -16,10 +17,7 @@ describe('GreetingStore', () => {
   });
 
   it('given an ADD_GREETING action with a newGreeting of \'Benjamin\', the newGreeting should be an empty string and greetings should contain \'Benjamin\'', () => {
-    [{
-      payload: 'Benjamin',
-      type: GreetingActionTypes.ADD_GREETING,
-    }].forEach(registeredCallback);
+    [new AddGreetingEvent('Benjamin')].forEach(registeredCallback);
 
     const { greetings, newGreeting } = GreetingStore.getState();
 
@@ -28,13 +26,7 @@ describe('GreetingStore', () => {
   });
 
   it('given an REMOVE_GREETING action with a greetingToRemove of \'Benjamin\', the state greetings should be an empty array', () => {
-    [{
-      payload: 'Benjamin',
-      type: GreetingActionTypes.ADD_GREETING,
-    }, {
-      payload: 'Benjamin',
-      type: GreetingActionTypes.REMOVE_GREETING,
-    }].forEach(registeredCallback);
+    [new AddGreetingEvent('Benjamin'), new RemoveGreeting('Benjamin')].forEach(registeredCallback);
 
     const { greetings } = GreetingStore.getState();
 
@@ -43,10 +35,7 @@ describe('GreetingStore', () => {
   });
 
   it('given a NEW_GREETING_CHANGED action with a newGreeting of \'Benjamin\', the state newGreeting should be \'Benjamin\'', () => {
-    [{
-      payload: 'Benjamin',
-      type: GreetingActionTypes.NEW_GREETING_CHANGED,
-    }].forEach(registeredCallback);
+    [new NewGreetingChanged('Benjamin')].forEach(registeredCallback);
 
     const { newGreeting } = GreetingStore.getState();