Start shift to redux

package.json

@@ -8,7 +8,7 @@
         "@material-ui/data-grid": "^4.0.0-alpha.27",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/types": "^5.1.0",
-        "@reduxjs/toolkit": "^1.7.2",
+        "@reduxjs/toolkit": "^1.8.0",
         "alg": "^0.9.23",
         "apollo-cache-inmemory": "^1.6.6",
         "apollo-client": "^2.6.10",

src/ApolloProvider.tsx → src/Provider.tsx

@@ -3,6 +3,8 @@ import { InMemoryCache } from 'apollo-cache-inmemory';
 import { createHttpLink } from 'apollo-link-http';
 import { ApolloProvider } from '@apollo/react-hooks';
 import App from './App';
+import { store } from './components/ReduxStore/store';
+import { Provider as ReduxProvider } from 'react-redux';
 
 const httpLink = createHttpLink({
     uri: 'http://localhost:5000',
@@ -14,8 +16,11 @@ const client: any = new ApolloClient({
 });
 
 // Wrapping the whole ReactApp - the ApolloClient  with ApolloProvider linked with the hosted Backend
+// And Redux Store ( State Management Solution)
 export default (
     <ApolloProvider client={client}>
-        <App />
+        <ReduxProvider store={store}>
+            <App />
+        </ReduxProvider>
     </ApolloProvider>
 );

src/components/CubeD/UX/ButtonBox.tsx

@@ -9,15 +9,15 @@ import { WiRefresh } from 'react-icons/wi';
 import { ImPlay2, ImPause } from 'react-icons/im';
 import { ThemeBtn, ButtonArea } from './CubeElements';
 import selMode from './modes';
-import { usePlay, useToggPlay } from '../AlgProvider';
-
+import { useAppSelector, useAppDispatch } from '../../ReduxStore/hooks';
+import { toggleplay } from '../../ReduxStore/playSlice';
 interface propsM {
     mode: string;
     setMode: React.Dispatch<React.SetStateAction<string>>;
 }
 const ButtonBox = ({ mode, setMode }: propsM) => {
-    let play = usePlay();
-    let toggleP = useToggPlay();
+    let play = useAppSelector((state) => state.playBtn.value);
+    let dispatch = useAppDispatch();
     // console.log('PlayBut', play);
     const icon = play == false ? <ImPlay2 /> : <ImPause />;
     return (
@@ -33,7 +33,7 @@ const ButtonBox = ({ mode, setMode }: propsM) => {
                     <CgChevronLeft />
                 </ThemeBtn>
                 {/* @ts-ignore */}
-                <ThemeBtn onClick={toggle}>{icon}</ThemeBtn>
+                <ThemeBtn onClick={() => dispatch(toggleplay())}>{icon}</ThemeBtn>
                 <ThemeBtn>
                     <CgChevronRight />
                 </ThemeBtn>
@@ -46,10 +46,6 @@ const ButtonBox = ({ mode, setMode }: propsM) => {
             </ButtonArea>
         </>
     );
-    function toggle() {
-        // console.log('Toggled.');
-        toggleP(!play);
-    }
     function toggleMode() {
         let modeto = mode == 'fullM' ? 'scraM' : 'fullM';
         setMode(modeto);

src/components/ReduxStore/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/components/ReduxStore/playSlice.ts

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const playSlice = createSlice({
+  name: 'play',
+  initialState: {
+    value: false
+  },
+  reducers: {
+    toggleplay: state => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value = !state.value 
+    },
+  }
+})
+
+export const { toggleplay } = playSlice.actions
+
+export default playSlice.reducer

src/components/ReduxStore/store.ts

@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit'
+import playReducer from './playSlice'
+
+// Every Feature gets a slice
+//  
+export const store = configureStore({
+  reducer: { playBtn : playReducer },
+})
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch

src/index.ts

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
 import './index.css';
-import ApolloProvider from './ApolloProvider';
+import ApolloProvider from './Provider';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 ReactDOM.render(ApolloProvider, document.getElementById('root'));

yarn.lock

@@ -1743,10 +1743,10 @@
     "@react-spring/shared" "~9.4.0"
     "@react-spring/types" "~9.4.0"
 
-"@reduxjs/toolkit@^1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.7.2.tgz#b428aaef92582379464f9de698dbb71957eafb02"
-  integrity sha512-wwr3//Ar8ZhM9bS58O+HCIaMlR4Y6SNHfuszz9hKnQuFIKvwaL3Kmjo6fpDKUOjo4Lv54Yi299ed8rofCJ/Vjw==
+"@reduxjs/toolkit@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.0.tgz#8ae875e481ed97e4a691aafa034f876bfd0413c4"
+  integrity sha512-cdfHWfcvLyhBUDicoFwG1u32JqvwKDxLxDd7zSmSoFw/RhYLOygIRtmaMjPRUUHmVmmAGAvquLLsKKU/677kSQ==
   dependencies:
     immer "^9.0.7"
     redux "^4.1.2"