feat: Upgrades to Redux Toolkit (#384)

package.json

@@ -8,6 +8,7 @@
   "private": true,
   "dependencies": {
     "@hathor/wallet-lib": "1.10.0",
+    "@reduxjs/toolkit": "2.5.1",
     "@unleash/proxy-client-react": "1.0.4",
     "axios": "1.7.2",
     "bootstrap": "5.3.3",
@@ -28,10 +29,9 @@
     "react-gtm-module": "2.0.11",
     "react-loading": "2.0.3",
     "react-paginate": "8.2.0",
-    "react-redux": "8.1.3",
+    "react-redux": "9.2.0",
     "react-router-dom": "6.29.0",
     "react-scripts": "3.4.4",
-    "redux": "4.2.1",
     "sass": "1.77.8",
     "unleash-proxy-client": "1.11.0",
     "viz.js": "2.1.2"

src/App.js

@@ -39,7 +39,7 @@ import {
   dashboardUpdate,
   isVersionAllowedUpdate,
   updateServerInfo,
-} from './actions/index';
+} from './store/rootSlice';
 import versionApi from './api/version';
 import helpers from './utils/helpers';
 import { BASE_URL } from './constants';
@@ -142,10 +142,6 @@ function Root() {
             path="/token_balances"
             element={<NavigationRoute internalScreen={TokenBalancesList} />}
           />
-          <Route
-            path="/token_balances"
-            element={<NavigationRoute internalScreen={TokenBalancesList} />}
-          />
           <Route path="/blocks" element={<NavigationRoute internalScreen={BlockList} />} />
           <Route path="/dag" component={Dag} element={<NavigationRoute internalScreen={Dag} />} />
           <Route path="/features" element={<NavigationRoute internalScreen={FeatureList} />} />

src/components/Navigation.js

@@ -28,7 +28,7 @@ import {
   UNLEASH_TOKEN_BALANCES_FEATURE_FLAG,
   REACT_APP_NETWORK,
 } from '../constants';
-import { toggleTheme } from '../actions';
+import { toggleTheme } from '../store/rootSlice';
 import NewHathorAlert from './NewHathorAlert';
 
 function Navigation() {

src/components/ThemeSwitch.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { toggleTheme } from '../actions';
+import { toggleTheme } from '../store/rootSlice';
 
 export const ThemeSwitch = () => {
   const theme = useSelector(state => state.theme);

src/screens/VersionError.js

@@ -10,7 +10,7 @@ import { useDispatch } from 'react-redux';
 import { MIN_API_VERSION } from '../constants';
 import versionApi from '../api/version';
 import helpers from '../utils/helpers';
-import { isVersionAllowedUpdate } from '../actions/index';
+import { isVersionAllowedUpdate } from '../store/rootSlice';
 import logo from '../assets/images/hathor-white-logo.png';
 import Version from '../components/Version';
 

src/store/index.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { createStore } from 'redux';
-import rootReducer from '../reducers/index';
+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './rootSlice';
 
-const store = createStore(rootReducer);
+const store = configureStore({ reducer: rootReducer });
 
 export default store;