From a801a8a7c82ddb7ad60ce2956cab95e1e0d1493e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 14 Mar 2022 18:01:09 -0500
Subject: [PATCH] soapbox/store/configureStore --> soapbox/store, add custom
 Hooks

---
 app/soapbox/containers/soapbox.js   |  4 +---
 app/soapbox/hooks/index.ts          |  1 +
 app/soapbox/hooks/useAppSelector.ts |  5 +++++
 app/soapbox/store.ts                | 23 +++++++++++++++++++++++
 app/soapbox/store/configureStore.ts | 20 --------------------
 5 files changed, 30 insertions(+), 23 deletions(-)
 create mode 100644 app/soapbox/hooks/index.ts
 create mode 100644 app/soapbox/hooks/useAppSelector.ts
 create mode 100644 app/soapbox/store.ts
 delete mode 100644 app/soapbox/store/configureStore.ts

diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 7f18e8b61..b3b07b9be 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -27,7 +27,7 @@ import { INTRODUCTION_VERSION } from '../actions/onboarding';
 import { preload } from '../actions/preload';
 import ErrorBoundary from '../components/error_boundary';
 import UI from '../features/ui';
-import configureStore from '../store/configureStore';
+import { store } from '../store';
 
 const validLocale = locale => Object.keys(messages).includes(locale);
 
@@ -39,8 +39,6 @@ const isInstanceLoaded = state => {
   return v !== '0.0.0' || fetchFailed;
 };
 
-export const store = configureStore();
-
 // Configure global functions for developers
 createGlobals(store);
 
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
new file mode 100644
index 000000000..88f47b434
--- /dev/null
+++ b/app/soapbox/hooks/index.ts
@@ -0,0 +1 @@
+export { useAppSelector } from './useAppSelector';
diff --git a/app/soapbox/hooks/useAppSelector.ts b/app/soapbox/hooks/useAppSelector.ts
new file mode 100644
index 000000000..576990079
--- /dev/null
+++ b/app/soapbox/hooks/useAppSelector.ts
@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+
+import { RootState } from 'soapbox/store';
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/app/soapbox/store.ts b/app/soapbox/store.ts
new file mode 100644
index 000000000..4b34e45e2
--- /dev/null
+++ b/app/soapbox/store.ts
@@ -0,0 +1,23 @@
+import { composeWithDevTools } from '@redux-devtools/extension';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+
+import errorsMiddleware from './middleware/errors';
+import soundsMiddleware from './middleware/sounds';
+import appReducer from './reducers';
+
+export const store = createStore(
+  appReducer,
+  composeWithDevTools(
+    applyMiddleware(
+      thunk,
+      errorsMiddleware(),
+      soundsMiddleware(),
+    ),
+  ),
+);
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+// https://redux.js.org/usage/usage-with-typescript
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/app/soapbox/store/configureStore.ts b/app/soapbox/store/configureStore.ts
deleted file mode 100644
index aee34e919..000000000
--- a/app/soapbox/store/configureStore.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { composeWithDevTools } from '@redux-devtools/extension';
-import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-
-import errorsMiddleware from '../middleware/errors';
-import soundsMiddleware from '../middleware/sounds';
-import appReducer from '../reducers';
-
-export default function configureStore() {
-  return createStore(
-    appReducer,
-    composeWithDevTools(
-      applyMiddleware(
-        thunk,
-        errorsMiddleware(),
-        soundsMiddleware(),
-      ),
-    ),
-  );
-}