Update App.js

react-redux-master/.gitignore

@@ -0,0 +1 @@
+node_modules/

react-redux-master/package.json

@@ -6,13 +6,13 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.0.4",
-    "react-scripts": "5.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.3",
+    "react-scripts": "^5.0.1",
     "react-service-worker": "^0.1.1",
-    "redux": "^4.2.0",
-    "web-vitals": "^2.1.0"
+    "redux": "^4.2.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

react-redux-master/src/actions/index.js

@@ -1 +1,8 @@
-//actions
+const increment = (val) => {
+    return {
+        type : 'INCREMENT',
+        inc : val
+    }
+}
+
+export default increment;

react-redux-master/src/components/DivPanel.js

@@ -1 +1,13 @@
+import React from 'react'
+import { useSelector } from 'react-redux';
 
+const DivPanel = () =>{
+    let counterVal = useSelector(state => state.counter)
+    return (
+        <div>
+            The present value of counter is {counterVal}
+        </div>
+    );
+}
+
+export default DivPanel;

react-redux-master/src/components/MainPanel.js

@@ -1 +1,13 @@
+import React from 'react'
+import MyButton from './MyButton'
+import DivPanel from './DivPanel';
 
+const MainPanel = ()=>{
+    return (
+        <div>
+            This is main panel <MyButton></MyButton>
+            <DivPanel></DivPanel>
+        </div>
+    );
+}
+export default MainPanel;

react-redux-master/src/components/MyButton.js

@@ -1 +1,12 @@
+import React from 'react'
+import { useDispatch} from 'react-redux';
+import increment from '../actions'
 
+const MyButton = ()=>{
+    let dispatch = useDispatch();
+    return (
+        <button onClick={()=>dispatch(increment(1))}>Increase counter</button>
+    );
+}
+
+export default MyButton;

react-redux-master/src/index.js

@@ -1,22 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-// import * as serviceWorker from './serviceWorker';
-
-import {createStore} from 'redux';
-import {Provider} from 'react-redux'
+import { Provider } from 'react-redux'
 import myReducers from './reducers'
-
+import { legacy_createStore as createStore } from 'redux';;
 
 //Create the store
 const myStore = createStore(myReducers);
 
 //This will console log the current state everytime the state changes
-myStore.subscribe(()=>console.log(myStore.getState()));
+myStore.subscribe(() => console.log(myStore.getState()));
 
 //Enveloping the App inside the Provider, ensures that the states in the store are available
 //throughout the application
-ReactDOM.render(<Provider store={myStore}><App/></Provider>, document.getElementById('root'));
+ReactDOM.render(<Provider store={myStore}><App /></Provider>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

react-redux-master/src/reducers/index.js

@@ -1 +1,14 @@
-//reducers
+import {combineReducers} from 'redux'
+
+const counter = (state=0,action)=>{
+    if(action.type === 'INCREMENT') {
+        //This will increase the value of counter by the value passed to the increment method
+        return state+action.inc;
+    }
+    //Returns the current value of the counter
+    return state;
+}
+
+const myReducers = combineReducers({counter});
+
+export default myReducers;