├── 8yov7c.zip
├── styles.css
├── Types.js
├── Store.js
├── App.js
├── CounterAction.js
├── index.js
├── CounterReducer.js
├── Counter.js
└── index.html


/8yov7c.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moemen12/Redux/HEAD/8yov7c.zip


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 |   font-family: sans-serif;
3 |   text-align: center;
4 | }
5 | 


--------------------------------------------------------------------------------
/Types.js:
--------------------------------------------------------------------------------
1 | export const INCREMENT = "INCREMENT";
2 | export const DECREMENT = "DECREMENT";
3 | export const INC_BY_VAL = "INC_BY_VAL";
4 | 


--------------------------------------------------------------------------------
/Store.js:
--------------------------------------------------------------------------------
1 | import { createStore } from "redux";
2 | import CounterReducer from "../reducers/CounterReducer";
3 | 
4 | const store = createStore(CounterReducer);
5 | 
6 | export default store;
7 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import Counter from "./components/Counter";
 2 | import "./styles.css";
 3 | 
 4 | export default function App() {
 5 |   return (
 6 |     <div className="App">
 7 |       <h1>Hello Redux</h1>
 8 |       <Counter />
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/CounterAction.js:
--------------------------------------------------------------------------------
 1 | import { DECREMENT, INCREMENT, INC_BY_VAL } from "./Types";
 2 | 
 3 | export const incrementAction = () => {
 4 |   return {
 5 |     type: INCREMENT
 6 |   };
 7 | };
 8 | 
 9 | export const decrementAction = () => {
10 |   return {
11 |     type: DECREMENT
12 |   };
13 | };
14 | 
15 | export const incrementByValue = (vl) => {
16 |   return {
17 |     type: INC_BY_VAL,
18 |     value: vl
19 |   };
20 | };
21 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import { Provider } from "react-redux";
 4 | import Store from "../src/redux/Store";
 5 | import App from "./App";
 6 | 
 7 | const rootElement = document.getElementById("root");
 8 | const root = createRoot(rootElement);
 9 | 
10 | root.render(
11 |   <Provider store={Store}>
12 |     <StrictMode>
13 |       <App />
14 |     </StrictMode>
15 |   </Provider>
16 | );
17 | 


--------------------------------------------------------------------------------
/CounterReducer.js:
--------------------------------------------------------------------------------
 1 | import { INCREMENT } from "../actions/Types";
 2 | import { DECREMENT } from "../actions/Types";
 3 | import { INC_BY_VAL } from "../actions/Types";
 4 | 
 5 | function CounterReducer(state = { count: 0 }, action) {
 6 |   switch (action.type) {
 7 |     case INCREMENT:
 8 |       return { ...state, count: state.count + 1 };
 9 |     case DECREMENT:
10 |       return { ...state, count: state.count - 1 };
11 |     case INC_BY_VAL:
12 |       return { ...state, count: state.count + action.value };
13 |     default:
14 |       return state;
15 |   }
16 | }
17 | export default CounterReducer;
18 | 


--------------------------------------------------------------------------------
/Counter.js:
--------------------------------------------------------------------------------
 1 | import { useDispatch, useSelector } from "react-redux";
 2 | import {
 3 |   incrementAction,
 4 |   decrementAction,
 5 |   incrementByValue
 6 | } from "../actions/CounterAction";
 7 | 
 8 | export default function Counter() {
 9 |   const countState = useSelector((state) => state.count);
10 |   //const {countState} = useSelector((state) => state);
11 |   const dispatch = useDispatch();
12 | 
13 |   const handleIncrement = () => {
14 |     dispatch(incrementAction());
15 |   };
16 | 
17 |   const handleDecrement = () => {
18 |     dispatch(decrementAction());
19 |   };
20 | 
21 |   const handleByValue = (vl) => {
22 |     dispatch(incrementByValue(vl));
23 |   };
24 | 
25 |   return (
26 |     <div>
27 |       <p>{countState}</p>
28 |       <button onClick={handleIncrement}>Increment</button>
29 |       <button onClick={handleDecrement}>Decrement</button>
30 |       <button
31 |         onClick={() => {
32 |           handleByValue(3);
33 |         }}
34 |       >
35 |         Increment by 5
36 |       </button>
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 | 	<meta name="theme-color" content="#000000">
 8 | 	<!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 | 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 | 	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 | 	<!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 | 	<title>React App</title>
24 | </head>
25 | 
26 | <body>
27 | 	<noscript>
28 | 		You need to enable JavaScript to run this app.
29 | 	</noscript>
30 | 	<div id="root"></div>
31 | 	<!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------