Merge pull request #31 from Chamindu36/ts-dev-migration

[TS Migration] Adding RootReducer properly and fix syntax errors

package.json

@@ -66,6 +66,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/redux-logger": "^3.0.9",
     "babel-eslint": "^10.1.0",
     "gh-pages": "^5.0.0"
   }

src/store/cart/cart.selector.ts

@@ -1,7 +1,9 @@
 import { createSelector } from 'reselect';
 import { CartState } from './cart.reducer';
 
-const selectCartReducer = (state): CartState => state.cart;
+import { RootState } from '../store'
+
+const selectCartReducer = (state: RootState): CartState => state.cart;
 
 export const selectIsCartOpen = createSelector(
     [selectCartReducer],

src/store/category/category.selector.ts

@@ -1,9 +1,10 @@
 import { createSelector } from "reselect";
 
+import { RootState } from '../store'
 import { CategoriesState } from "./category.reducer";
 import { CategoryMap } from "./category.types";
 
-const selectCategoryReducer = (state): CategoriesState => state.categories;
+const selectCategoryReducer = (state: RootState): CategoriesState => state.categories;
 
 export const selectCategories = createSelector(
     [selectCategoryReducer],

src/store/store.js → src/store/store.ts

@@ -1,16 +1,30 @@
-import { compose, createStore, applyMiddleware } from 'redux';
+import { compose, createStore, applyMiddleware, Middleware } from 'redux';
 
-import { persistStore, persistReducer } from 'redux-persist';
+import { persistStore, persistReducer, PersistConfig } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
 import logger from 'redux-logger';
+
 // import thunk from 'redux-thunk'; // No need to use thunks when using sagas
 import createSagaMiddleware from 'redux-saga'
 
 import { rootReducer } from './root-reducer';
 import { rootSaga } from './root-saga';
 
-const persistConfig = {
+export type RootState = ReturnType<typeof rootReducer>;
+
+declare global {
+    interface Window {
+        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
+    }
+};
+
+type ExtendedPersistConfig = PersistConfig<RootState> & {
+    whitelist: Array<keyof RootState>;
+};
+
+
+const persistConfig : ExtendedPersistConfig= {
     key: 'root',
     storage,
     whitelist: ['cart']
@@ -20,9 +34,10 @@ const sagaMiddleWare = createSagaMiddleware();
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);
 
-const middleWares = [process.env.NODE_ENV !== 'production' && logger,
+const middleWares = [
+    process.env.NODE_ENV !== 'production' && logger,
     sagaMiddleWare
-].filter(Boolean);
+].filter((middleware): middleware is Middleware =>Boolean(middleware));
 
 // Add dev tool extension in chrome to see states, acions and changes
 const composeEnhancer =

src/store/user/user.selector.ts

@@ -1,8 +1,10 @@
 import { createSelector } from 'reselect';
 
+import { RootState } from '../store'
+
 import { UserState } from './user.reducer';
 
-export const selectUserReducer = (state): UserState => state.user;
+export const selectUserReducer = (state: RootState): UserState => state.user;
 
 export const selectCurrentUser = createSelector(
     selectUserReducer,