use {type: string; payload: any} as type for actions

Author: JLarky

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

@@ -3,21 +3,21 @@ import GreetingActionTypes from '../constants/action-types/GreetingActionTypes';
 
 export function addGreeting(newGreeting: string) {
   AppDispatcher.dispatch({
-    newGreeting,
+    payload: newGreeting,
     type: GreetingActionTypes.ADD_GREETING
-  } as Event);
+  });
 }
 
 export function newGreetingChanged(newGreeting: string) {
   AppDispatcher.dispatch({
-    newGreeting,
+    payload: newGreeting,
     type: GreetingActionTypes.NEW_GREETING_CHANGED
-  } as Event);
+  });
 }
 
 export function removeGreeting(greetingToRemove: string) {
   AppDispatcher.dispatch({
-    greetingToRemove,
+    payload: greetingToRemove,
     type: GreetingActionTypes.REMOVE_GREETING
-  } as Event);
+  });
 }

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

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

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

@@ -1,21 +1,21 @@
 import { EventEmitter } from 'events';
+import { Event } from '../dispatcher/AppDispatcher';
 
 const CHANGE_EVENT = 'change';
 
-class FluxStore<PayloadType, TState> {
+class FluxStore<TState> {
   _changed: boolean;
   _emitter: EventEmitter;
   dispatchToken: string;
-  _dispatcher: Flux.Dispatcher<PayloadType>;
+  _dispatcher: Flux.Dispatcher<Event>;
   _cleanStateFn: () => TState;
   _state: TState;
-  protected _onDispatch: (payload: PayloadType) => void;
 
-  constructor(dispatcher: Flux.Dispatcher<PayloadType>, cleanStateFn: () => TState) {
+  constructor(dispatcher: Flux.Dispatcher<Event>, protected _onDispatch: (action: Event) => void, cleanStateFn: () => TState) {
     this._emitter = new EventEmitter();
     this._changed = false;
     this._dispatcher = dispatcher;
-    this.dispatchToken = dispatcher.register((payload: PayloadType) => {
+    this.dispatchToken = dispatcher.register((payload: Event) => {
       this._invokeOnDispatch(payload);
     });
 
@@ -45,7 +45,7 @@ class FluxStore<PayloadType, TState> {
     this._state = this._cleanStateFn();
   }
 
-  _invokeOnDispatch(payload: PayloadType) {
+  _invokeOnDispatch(payload: Event) {
     this._changed = false;
     this._onDispatch(payload);
     if (this._changed) {

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

@@ -3,9 +3,26 @@ import GreetingActionTypes from '../constants/action-types/GreetingActionTypes';
 import {Event, AppDispatcher} from '../dispatcher/AppDispatcher';
 import GreetingState from '../types/GreetingState';
 
-class GreeterStore<TPayload> extends FluxStore<TPayload, GreetingState> {
-  constructor(dispatcher: Flux.Dispatcher<TPayload>) {
-    super(dispatcher, () => ({
+class GreeterStore extends FluxStore<GreetingState> {
+  constructor(dispatcher: Flux.Dispatcher<Event>) {
+    const onDispatch = (action: Event) => {
+      switch(action.type) {
+        case GreetingActionTypes.ADD_GREETING:
+          this._state.newGreeting = '';
+          this._state.greetings = this._state.greetings.concat(action.payload);
+          this.emitChange();
+          break;
+        case GreetingActionTypes.REMOVE_GREETING:
+          this._state.greetings = this._state.greetings.filter(g => g !== action.payload);
+          this.emitChange();
+          break;
+        case GreetingActionTypes.NEW_GREETING_CHANGED:
+          this._state.newGreeting = action.payload;
+          this.emitChange();
+          break;
+      }
+    }
+    super(dispatcher, onDispatch, () => ({
       greetings: [],
       newGreeting: ''
     }));
@@ -14,24 +31,6 @@ class GreeterStore<TPayload> extends FluxStore<TPayload, GreetingState> {
   getState() {
     return this._state
   }
-
-  _onDispatch = (action: any) => {
-    switch((<Event>action).type) {
-      case GreetingActionTypes.ADD_GREETING:
-        this._state.newGreeting = '';
-        this._state.greetings = this._state.greetings.concat(action.newGreeting);
-        this.emitChange();
-        break;
-      case GreetingActionTypes.REMOVE_GREETING:
-        this._state.greetings = this._state.greetings.filter(g => g !== action.greetingToRemove);
-        this.emitChange();
-        break;
-      case GreetingActionTypes.NEW_GREETING_CHANGED:
-        this._state.newGreeting = action.newGreeting;
-        this.emitChange();
-        break;
-    }
-  }
 }
 
 const greeterStoreInstance = new GreeterStore(AppDispatcher);

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

@@ -17,7 +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\'', () => {
     [{
-      newGreeting: 'Benjamin',
+      payload: 'Benjamin',
       type: GreetingActionTypes.ADD_GREETING,
     }].forEach(registeredCallback);
 
@@ -29,10 +29,10 @@ describe('GreetingStore', () => {
 
   it('given an REMOVE_GREETING action with a greetingToRemove of \'Benjamin\', the state greetings should be an empty array', () => {
     [{
-      newGreeting: 'Benjamin',
+      payload: 'Benjamin',
       type: GreetingActionTypes.ADD_GREETING,
     }, {
-      greetingToRemove: 'Benjamin',
+      payload: 'Benjamin',
       type: GreetingActionTypes.REMOVE_GREETING,
     }].forEach(registeredCallback);
 
@@ -44,7 +44,7 @@ describe('GreetingStore', () => {
 
   it('given a NEW_GREETING_CHANGED action with a newGreeting of \'Benjamin\', the state newGreeting should be \'Benjamin\'', () => {
     [{
-      newGreeting: 'Benjamin',
+      payload: 'Benjamin',
       type: GreetingActionTypes.NEW_GREETING_CHANGED,
     }].forEach(registeredCallback);