add redux listener

react-ui/src/hooks.ts

+import { useDispatch, useSelector } from "react-redux"
+import { AppDispatch, RootState } from "./stores"
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
\ No newline at end of file

react-ui/src/stores/index.ts

@@ -5,6 +5,7 @@ import persistStore from 'redux-persist/es/persistStore'
 import { emptySplitApi } from './api.store'
 import { rtkQueryErrorLogger } from './middleware/devLogging.middleware'
 import persistedReducer from './persist.store'
+import { listenerMiddleware } from './middleware/listener.middleware'
 
 
 export const store = configureStore({
@@ -14,7 +15,7 @@ export const store = configureStore({
       serializableCheck: {
         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
       },
-    }).concat(emptySplitApi.middleware, rtkQueryErrorLogger),
+    }).prepend(listenerMiddleware.middleware).concat(emptySplitApi.middleware, rtkQueryErrorLogger),
 })
 
 export const persistor = persistStore(store)

react-ui/src/stores/middleware/listener.middleware.ts

+import { createListenerMiddleware } from "@reduxjs/toolkit";
+
+export const listenerMiddleware = createListenerMiddleware()
+
+export const { startListening, stopListening } = listenerMiddleware
\ No newline at end of file

react-ui/src/stores/reducer/login.reducer.ts

 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { startListening } from '../middleware/listener.middleware';
+import { useAuthServiceLoginMutation } from '@api/api';
 
 export interface LoginFormFields {
     username?: string,
@@ -50,3 +52,13 @@ export const { setLoginBackendCheck } = loginSlice.actions
 export const { setLoginFormFields } = loginSlice.actions
 
 export default loginSlice.reducer
+
+
+startListening({
+    actionCreator: setLoginFormFields,
+
+    effect: async (action, listenerApi) => {
+        console.log('oh baby');
+
+      },
+})
\ No newline at end of file