Redux 2.0 migration (#661)

* update dependency versions

* update types of setUpStore utility function to use Partial instead of PreloadedState interface which was removed in RTK 2.0

* remove authSlice.spec which currently was not doing anything other than throwing type errors

client/package.json

@@ -22,7 +22,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.2",
-    "@reduxjs/toolkit": "^1.9.7",
+    "@reduxjs/toolkit": "^2.0.1",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.10.7",
     "axios": "^1.6.2",
@@ -31,7 +31,7 @@
     "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.0.2",
     "react-router-dom": "^6.20.1",
     "react-select": "^5.8.0",
     "react-toastify": "^9.1.3",
@@ -66,7 +66,7 @@
     "source-map-explorer": "^2.5.3",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.4",
+    "vite": "^5.0.6",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^0.34.6",

client/src/hooks/useProgressTracker/useProgressTracker.tsx

@@ -1,4 +1,4 @@
-import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
+import { UnknownAction, ThunkAction } from '@reduxjs/toolkit';
 import { useEffect, useState } from 'react';
 import {
   selectTask,
@@ -21,7 +21,7 @@ export function useProgressTracker({
   reduxAction,
 }: {
   taskId: string | undefined;
-  reduxAction?: AnyAction | ThunkAction<any, any, any, any>;
+  reduxAction?: UnknownAction | ThunkAction<any, any, any, any>;
 }) {
   const dispatch = useAppDispatch();
   const taskComplete = useAppSelector(selectTaskCompletion(taskId));

client/src/store/authSlice/auth.slice.ts

@@ -123,19 +123,13 @@ const authSlice = createSlice({
   },
 });
 
-/**
- * Get the current user's username from the Redux store
- */
+/** Get the current user's username from the Redux store*/
 export const selectUserName = (state: RootState): string | undefined => state.auth.user?.username;
 
-/**
- * Select the current user
- */
+/** Select the current user*/
 export const selectUser = (state: RootState): HaztrakUser | undefined => state.auth.user;
 
-/**
- * Select the current User State
- */
+/** Select the current User State*/
 export const selectUserState = (state: RootState): UserState => state.auth;
 
 export default authSlice.reducer;

client/src/store/haztrakApiSlice.ts

@@ -1,10 +1,10 @@
-import { BaseQueryFn, createApi } from '@reduxjs/toolkit/dist/query/react';
 import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { HaztrakSite } from 'components/HaztrakSite';
 import { Code } from 'components/Manifest/WasteLine/wasteLineSchema';
 import { MtnDetails } from 'components/Mtn';
 import { RcraSite } from 'components/RcraSite';
 import { htApi } from 'services';
+import { BaseQueryFn, createApi } from '@reduxjs/toolkit/query/react';
 
 export interface HtApiQueryArgs {
   url: string;

client/src/store/index.ts

@@ -1,11 +1,7 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import type { AppDispatch, AppStore, RootState } from './rootStore';
-import { rootStore, setupStore } from './rootStore';
 
 // Root Store
-export const useAppDispatch = () => useDispatch<AppDispatch>();
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
-export { rootStore, setupStore };
+export { rootStore, setupStore, useAppDispatch, useAppSelector } from './rootStore';
 export type { RootState, AppDispatch, AppStore };
 
 // Haztrak API - RTK Query

client/src/store/rootStore.ts

@@ -1,9 +1,10 @@
-import { combineReducers, configureStore, PreloadedState } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import userReducers, { login } from './authSlice/auth.slice';
 import errorReducers from './errorSlice/error.slice';
 import { haztrakApi } from './haztrakApiSlice';
 import notificationReducers from './notificationSlice/notification.slice';
 import profileReducers from './profileSlice/profile.slice';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
 const rootReducer = combineReducers({
   auth: userReducers,
@@ -14,7 +15,7 @@ const rootReducer = combineReducers({
 });
 
 /**A utility function to initialize the store with preloaded state used for testing*/
-const setupStore = (preloadedState?: PreloadedState<RootState>) => {
+const setupStore = (preloadedState?: Partial<RootState>) => {
   return configureStore({
     reducer: rootReducer,
     middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(haztrakApi.middleware),
@@ -24,6 +25,8 @@ const setupStore = (preloadedState?: PreloadedState<RootState>) => {
 
 /** The root store for the application*/
 const rootStore = setupStore();
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 export type AppDispatch = typeof rootStore.dispatch;
 export type RootState = ReturnType<typeof rootReducer>;
 export type AppStore = ReturnType<typeof setupStore>;

client/src/test-utils/render.tsx

@@ -1,4 +1,3 @@
-import { PreloadedState } from '@reduxjs/toolkit';
 import { render, RenderOptions } from '@testing-library/react';
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
@@ -7,7 +6,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { AppStore, RootState, setupStore } from 'store';
 
 interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
-  preloadedState?: PreloadedState<RootState>;
+  preloadedState?: Partial<RootState>;
   store?: AppStore;
   useFormProps?: UseFormProps;
 }