using hooks

src/components/Counter.js

@@ -1,28 +1,23 @@
- import { connect } from "react-redux";
- import * as action from '../actions'; 
- import { bindActionCreators } from "redux";
+ import { useDispatch, useSelector } from "react-redux";
+ import {inc, dec, rnd} from '../actions'; 
 
 
 
- const Counter = ({ counter, inc, dec, rnd}) => {
+ const Counter = () => {
+
+    const counter = useSelector(state => state.counter);
+    const dispatch = useDispatch();
+
+
     return (
             <>
                 <div > {counter} </div>
-                <button onClick={dec} > - </button>
-                <button onClick={inc} > + </button>
-                <button onClick={rnd} > rnd </button>
+                <button onClick={() => dispatch(dec())} > - </button>
+                <button onClick={() => dispatch(inc())} > + </button>
+                <button onClick={() => dispatch(rnd())} > rnd </button>
             </> 
         )
     }
 
-const mapStateToProps = (state) => {
-    return (
-        {
-            counter: state.value,
-        }
-    )
-}
-const mapDispatchToProps = (dispatch) => bindActionCreators(action, dispatch)
-
 
-export default connect(mapStateToProps, mapDispatchToProps )(Counter);
+export default Counter;

src/index.js

@@ -12,7 +12,7 @@ export const store = createStore(reducer);
 const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
         <Provider store = {store} >
-            <App />
+            <App/>
         </Provider>
     )
  

src/reducer.js

@@ -1,23 +1,23 @@
 
 const initialState = {
-    value: 5,    
+    counter: 0,    
   }
   
 const reducer = (state = initialState, action) => {
     switch (action.type){
     case 'INC':  
       return {...state, 
-        value:
-          state.value + 1
+        counter:
+          state.counter + 1
         };
     case 'DEC':
      return {...state, 
-      value:
-        state.value - 1
+      counter:
+        state.counter - 1
       };
     case 'RND':
       return {...state, 
-        value: state.value * action.payload
+        counter: state.counter * action.payload
       };
     default:
       return state