Add redux

decayedCell · decayedCell · commit 33d4c3d43ed9 · 2023-03-31T23:28:09.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,9 +11,11 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.15",
+    "@reduxjs/toolkit": "^1.9.3",
     "next": "latest",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-redux": "^8.0.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,11 +2,15 @@ import type {AppProps} from 'next/app';
 
 import '../styles/globals.css';
 import Layout from '../components/layout';
+import {store} from '../store/store';
+import {Provider} from 'react-redux';
 
 export default function MyApp({Component, pageProps}: AppProps) {
   return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
+    <Provider store={store}>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </Provider>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,8 +2,13 @@ import Head from 'next/head';
 import styles from '../styles/Home.module.css';
 import Link from 'next/link';
 import Script from 'next/script';
+import {useSelector, useDispatch} from 'react-redux';
+import {decrement, increment, selectValue} from '../store/slices/counterSlice';
 
 export default function Home() {
+  const count = useSelector(selectValue);
+  const dispatch = useDispatch();
+
   return (
     <div className={styles.container}>
       <Head>
@@ -60,6 +65,9 @@ export default function Home() {
             </p>
           </a>
         </div>
+        <div>The value of count is {count}</div>
+        <button onClick={() => dispatch(increment())}>Increment</button>
+        <button onClick={() => dispatch(decrement())}>Decrement</button>
       </main>
 
       <footer>
diff --git a/store/slices/counterSlice.tsx b/store/slices/counterSlice.tsx
@@ -0,0 +1,33 @@
+import {createSlice} from '@reduxjs/toolkit';
+import type {PayloadAction} from '@reduxjs/toolkit';
+import {RootState} from '../store';
+
+interface CounterState {
+  value: number;
+}
+
+const initialState: CounterState = {
+  value: 0,
+};
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload;
+    },
+  },
+});
+
+export const {increment, decrement, incrementByAmount} = counterSlice.actions;
+
+export const selectValue = (state: RootState) => state.counter.value;
+
+export default counterSlice.reducer;
diff --git a/store/store.tsx b/store/store.tsx
@@ -0,0 +1,12 @@
+import {configureStore} from '@reduxjs/toolkit';
+import counterReducer from './slices/counterSlice';
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+
+export type AppDispatch = typeof store.dispatch;
