Merge pull request #11108 from codeSafari10/connections-page-rtk

Enhance rtk and redux global injection
meshery · Jun 4, 2024 · b9dba03 · b9dba03
2 parents a692d21 + dcc2784
commit b9dba03
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/ui/lib/store.js b/ui/lib/store.js
@@ -2,6 +2,8 @@ import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from '@redux-devtools/extension';
 import thunkMiddleware from 'redux-thunk';
 import { fromJS } from 'immutable';
+import { createContext } from 'react';
+import { createDispatchHook, createSelectorHook } from 'react-redux';
 
 const initialState = fromJS({
   page: {
@@ -430,3 +432,8 @@ export const selectK8sContexts = (state) => {
   const k8scontext = state.get('k8sConfig');
   return k8scontext?.toJS?.() || k8scontext;
 };
+
+export const LegacyStoreContext = createContext(null);
+
+export const useLegacySelector = createSelectorHook(LegacyStoreContext);
+export const useLegacyDispactch = createDispatchHook(LegacyStoreContext);
diff --git a/ui/pages/_app.js b/ui/pages/_app.js
@@ -36,6 +36,7 @@ import {
   toggleCatalogContent,
   updateTelemetryUrls,
   setConnectionMetadata,
+  LegacyStoreContext,
 } from '../lib/store';
 import theme, { styles } from '../themes';
 import { getConnectionIDsFromContextIds, getK8sConfigIdsFromK8sConfig } from '../utils/multi-ctx';
@@ -65,6 +66,8 @@ import { ability } from '../utils/can';
 import { getCredentialByID } from '@/api/credentials';
 import { DynamicComponentProvider } from '@/utils/context/dynamicContext';
 import { useTheme } from '@material-ui/core/styles';
+import { store } from '../store';
+import { RTKContext } from '@/store/hooks';
 
 if (typeof window !== 'undefined') {
   require('codemirror/mode/yaml/yaml');
@@ -798,14 +801,18 @@ const MesheryWithRedux = withStyles(styles)(
 
 const MesheryAppWrapper = (props) => {
   return (
-    <Provider store={props.store}>
-      <Head>
-        <link rel="shortcut icon" href="/static/img/meshery-logo/meshery-logo.svg" />
-        <title>Meshery</title>
-      </Head>
-      <MuiPickersUtilsProvider utils={MomentUtils}>
-        <MesheryWithRedux {...props} />
-      </MuiPickersUtilsProvider>
+    <Provider store={store} context={RTKContext}>
+      <Provider store={props.store} context={LegacyStoreContext}>
+        <Provider store={props.store}>
+          <Head>
+            <link rel="shortcut icon" href="/static/img/meshery-logo/meshery-logo.svg" />
+            <title>Meshery</title>
+          </Head>
+          <MuiPickersUtilsProvider utils={MomentUtils}>
+            <MesheryWithRedux {...props} />
+          </MuiPickersUtilsProvider>
+        </Provider>
+      </Provider>
     </Provider>
   );
 };

diff --git a/ui/rtk-query/index.js b/ui/rtk-query/index.js
@@ -1,5 +1,19 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { useSelectorRtk, useDispatchRtk, useStoreRtk } from '@/store/hooks';
+import {
+  coreModule,
+  reactHooksModule,
+  buildCreateApi,
+  fetchBaseQuery,
+} from '@reduxjs/toolkit/query/react';
 
+const createApi = buildCreateApi(
+  coreModule(),
+  reactHooksModule({
+    useSelector: useSelectorRtk,
+    useDispatch: useDispatchRtk,
+    useStore: useStoreRtk,
+  }),
+);
 export const api = createApi({
   reducerPath: 'mesheryApi',
   baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),

diff --git a/ui/store/hooks.js b/ui/store/hooks.js
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { createDispatchHook, createSelectorHook, createStoreHook } from 'react-redux';
+
+export const RTKContext = createContext(null);
+
+export const useSelectorRtk = createSelectorHook(RTKContext);
+export const useDispatchRtk = createDispatchHook(RTKContext);
+export const useStoreRtk = createStoreHook(RTKContext);