Bug Description
Throughout the frontend application, the Redux useSelector hook is used without proper typings. The code currently uses useSelector((state: any) => state.something) in dozens of files across frontend/src/screens and frontend/src/components. This bypasses TypeScript entirely, making state access prone to runtime errors if the Redux state shape changes.
Steps to Reproduce
- Open any component or screen file in the codebase (e.g.,
frontend/src/screens/UserProfileScreen.tsx).
- Search for the
useSelector hook.
- Observe that it is typed as
useSelector((state: any) => ...) instead of utilizing the RootState defined in ReduxStore.ts.
- Run the TypeScript compiler (
pnpm run type-check) and note that state access errors are not caught because of the any type.
Affected Area
Dashboard
Screenshots
No response
Browser & OS
Not applicable (Codebase architecture issue).
Environment
None
Additional Context
We should create a custom reduxHooks.ts file that exports a strongly typed useAppSelector and useAppDispatch to resolve this technical debt once and for all.
Bug Description
Throughout the frontend application, the Redux
useSelectorhook is used without proper typings. The code currently usesuseSelector((state: any) => state.something)in dozens of files acrossfrontend/src/screensandfrontend/src/components. This bypasses TypeScript entirely, making state access prone to runtime errors if the Redux state shape changes.Steps to Reproduce
frontend/src/screens/UserProfileScreen.tsx).useSelectorhook.useSelector((state: any) => ...)instead of utilizing theRootStatedefined inReduxStore.ts.pnpm run type-check) and note that state access errors are not caught because of theanytype.Affected Area
Dashboard
Screenshots
No response
Browser & OS
Not applicable (Codebase architecture issue).
Environment
None
Additional Context
We should create a custom
reduxHooks.tsfile that exports a strongly typeduseAppSelectoranduseAppDispatchto resolve this technical debt once and for all.