Rewritten some parts of redux store to use typescript interfaces

client/src/store/actions/actionTypes.ts

@@ -1,5 +1,13 @@
-export const SET_THEME = 'SET_THEME';
+import {
+  GetAppsAction,
+  SetTheme
+} from './';
 
-export const GET_APPS = 'GET_APPS';
-export const GET_APPS_SUCCESS = 'GET_APPS_SUCCESS';
-export const GET_APPS_ERROR = 'GET_APPS_ERROR';
+export enum ActionTypes {
+  setTheme,
+  getApps,
+  getAppsSuccess,
+  getAppsError
+}
+
+export type Action = GetAppsAction<any> | SetTheme;

client/src/store/actions/app.ts

@@ -1,24 +1,29 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
-import {
-  GET_APPS,
-  GET_APPS_SUCCESS,
-  GET_APPS_ERROR
-} from './actionTypes';
+import { ActionTypes } from './actionTypes';
+import { App, AppResponse } from '../../interfaces/App';
+
+export interface GetAppsAction<T> {
+  type: ActionTypes.getApps | ActionTypes.getAppsSuccess | ActionTypes.getAppsError,
+  payload: T
+}
 
 export const getApps = () => async (dispatch: Dispatch) => {
-  dispatch({ type: GET_APPS });
+  dispatch<GetAppsAction<undefined>>({
+    type: ActionTypes.getApps,
+    payload: undefined
+  });
 
   try {
-    const res = await axios.get('/api/apps');
+    const res = await axios.get<AppResponse>('/api/apps');
 
-    dispatch({
-      type: GET_APPS_SUCCESS,
+    dispatch<GetAppsAction<App[]>>({
+      type: ActionTypes.getAppsSuccess,
       payload: res.data.data
     })
   } catch (err) {
-    dispatch({
-      type: GET_APPS_ERROR,
+    dispatch<GetAppsAction<string>>({
+      type: ActionTypes.getAppsError,
       payload: err.data.data
     })
   }

client/src/store/actions/theme.ts

@@ -1,7 +1,12 @@
 import { Dispatch } from 'redux';
 import { themes } from '../../components/Themer/themes.json';
 import { Theme } from '../../interfaces/Theme';
-import { SET_THEME } from './actionTypes';
+import { ActionTypes } from './actionTypes';
+
+export interface SetTheme {
+  type: ActionTypes.setTheme,
+  payload: string
+}
 
 export const setTheme = (themeName: string) => (dispatch: Dispatch) => {
   const theme = themes.find((theme: Theme) => theme.name === themeName);
@@ -10,8 +15,8 @@ export const setTheme = (themeName: string) => (dispatch: Dispatch) => {
     localStorage.setItem('theme', themeName);
     loadTheme(theme);
 
-    dispatch({
-      type: SET_THEME,
+    dispatch<SetTheme>({
+      type: ActionTypes.setTheme,
       payload: themeName
     })
   }