useReducer_learning

src/App.js

@@ -1,16 +1,44 @@
-import React from 'react'
+import React, {useReducer} from 'react'
 import './App.css'
 import Greet from './components/Greet'
-import Welcome from "./components/Welcome";
-import Count from "./components/Counter"
+import ComponentA from "./components/ComponentA";
+import ComponentB from "./components/ComponentB";
+import ComponentC from "./components/ComponentC";
+// import Welcome from "./components/Welcome";
+// import Count from "./components/Counter"
+// import Counter from "./components/Counter";
+// import CounterTwo from "./components/CounterTwo";
 
+export const CountContext = React.createContext()
+
+const initialState = 0;
+const reducer = (state, change) => {
+    switch (change) {
+        case 'first':
+            return state + 5
+        case  'second':
+            return state - 5
+        case  'reset' :
+            return initialState
+        default:
+            return state
+    }
+}
 const App = () => {
-  return(
-    <div className="App">
-      <Greet name="Fuck you" age="45"/>
-      <Welcome/>
-      <Count/>
-    </div>
+    const [count, dispatch] =useReducer(reducer, initialState)
+    return (
+        <CountContext.Provider value = {{ countState: count, countDispatch: dispatch}}>
+            <div className="App">
+                <Greet name="Fuck you" age="45"/>
+                {/*<Welcome/>*/}
+                {/*<Count/>*/}
+                {/*<CounterTwo/>*/}
+                Count - {count}
+                <ComponentA/>
+                <ComponentB/>
+                <ComponentC/>
+            </div>
+        </CountContext.Provider>
   )
 }
 export default App;

src/components/ComponentA.js

@@ -0,0 +1,16 @@
+import React, {useContext} from 'react';
+import {CountContext} from "../App";
+
+function ComponentA() {
+    const countContext = useContext(CountContext)
+    return (
+        <div>
+            A - {countContext.countState}
+            <button onClick={() => countContext.countDispatch('first')}>First Button</button>
+            <button onClick={() => countContext.countDispatch('second')}>Second Button</button>
+            <button onClick={() => countContext.countDispatch('reset')}>reset</button>
+        </div>
+    );
+}
+
+export default ComponentA;

src/components/ComponentB.js

@@ -0,0 +1,16 @@
+import React, {useContext} from 'react';
+import {CountContext} from "../App";
+
+const ComponentB = () => {
+    const countContext = useContext(CountContext)
+    return (
+        <div>
+            B - {countContext.countState}
+            <button onClick={() => countContext.countDispatch('first')}>First Button</button>
+            <button onClick={() => countContext.countDispatch('second')}>Second Button</button>
+            <button onClick={() => countContext.countDispatch('reset')}>reset</button>
+        </div>
+    );
+};
+
+export default ComponentB;

src/components/ComponentC.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ComponentE from "./ComponentE";
+
+function ComponentC(props) {
+    return (
+        <div>
+            <ComponentE/>
+        </div>
+    );
+}
+
+export default ComponentC;

src/components/ComponentE.js

@@ -0,0 +1,18 @@
+import React, {useContext} from 'react';
+import ComponentF from "./ComponentF";
+import {CountContext} from "../App";
+
+const ComponentE = () => {
+    const countContext = useContext(CountContext)
+    return (
+        <div>
+            <ComponentF/>
+            E - {countContext.countState}
+            <button onClick={() => countContext.countDispatch('first')}>First Button</button>
+            <button onClick={() => countContext.countDispatch('second')}>Second Button</button>
+            <button onClick={() => countContext.countDispatch('reset')}>reset</button>
+        </div>
+    );
+};
+
+export default ComponentE;

src/components/ComponentF.js

@@ -0,0 +1,16 @@
+import React, {useContext} from 'react';
+import {CountContext} from "../App";
+
+const ComponentF = () => {
+    const countContext = useContext(CountContext)
+    return (
+        <div>
+            F - {countContext.countState}
+            <button onClick={() => countContext.countDispatch('first')}>First Button</button>
+            <button onClick={() => countContext.countDispatch('second')}>Second Button</button>
+            <button onClick={() => countContext.countDispatch('reset')}>reset</button>
+        </div>
+    );
+};
+
+export default ComponentF;

src/components/Counter.js

@@ -1,31 +1,29 @@
-import React, {useMemo, useState} from "react";
+import React, {useReducer} from "react";
 
-const Counter = () => {
-  const [count, setCount] = useState(0);
-  const [second, setSecond] = useState(0);
-  const increment = () => {
-    setCount( count + 1);
-  }
-  const twoincrement = () => {
-    setSecond(second +1);
-  }
-  const even = useMemo(() => {
-    let i = 0;
-    while(i<20000) i++
-    return count % 2 === 0
-  }, [count])
-
-  return(
-    <div>
-      <div>
-        <button onClick={increment}>Count{count}</button>
-        <span>{even ? "Yes" : "No"}</span>
-      </div>
+const initialState = 0;
+
+function Counter() {
+    const reducer = (state, change) => {
+        switch(change) {
+            case 'first':
+                return state + 5
+            case  'second':
+                return state - 5
+            case  'reset' :
+                return  initialState
+            default:
+                return state
+        }
+    }
+  const [count, dispatch] = useReducer(reducer, initialState)
+  return (
       <div>
-        <button onClick={twoincrement}>Pushed{second}</button>
+          <div>Count  {count}</div>
+        <button onClick={() => dispatch('first')}>First Button</button>
+        <button onClick={() => dispatch('second')}>Second Button</button>
+        <button onClick={() => dispatch('reset')}>reset</button>
       </div>
-    </div>
-  )
+  );
 }
 
 export default Counter;

src/components/CounterTwo.js

@@ -0,0 +1,43 @@
+import React, {useReducer} from "react";
+
+const initialState = {
+    firstCounter: 0,
+    secondCounter: 10
+};
+
+function CounterTwo() {
+    const reducer = (state, change) => {
+        console.log(state.firstCounter)
+        switch(change.type) {
+            case 'first':
+                return {...state, firstCounter: state.firstCounter + change.value}
+            case 'second':
+                return {...state, firstCounter: state.firstCounter - change.value}
+            case 'reset' :
+                return  {...state, firstCounter: initialState.firstCounter}
+            case 'jumpFirst':
+                return {...state, secondCounter: state.secondCounter + change.value}
+            case 'jumpSecond':
+                return {...state, secondCounter: state.secondCounter - change.value}
+            case 'jumpReset' :
+                return  {...state, secondCounter: initialState.secondCounter}
+            default:
+                return state
+        }
+    }
+    const [count, dispatch] = useReducer(reducer, initialState)
+    return (
+        <div>
+            <div>Count  {count.firstCounter}</div>
+            <button onClick={() => dispatch({type: 'first', value: 1})}>First Button</button>
+            <button onClick={() => dispatch({type: 'second', value: 1})}>Second Button</button>
+            <button onClick={() => dispatch({type: 'reset'})}>reset</button>
+            <div>Count  {count.secondCounter}</div>
+            <button onClick={() => dispatch({type: 'jumpFirst', value: 1})}>First Button</button>
+            <button onClick={() => dispatch({type: 'jumpSecond', value: 1})}>Second Button</button>
+            <button onClick={() => dispatch({type: 'jumpReset'})}>reset</button>
+        </div>
+    );
+}
+
+export default CounterTwo;

src/components/Greet.js

@@ -3,7 +3,7 @@ import React from  'react'
 
 const Greet = (props) => {
 
-    return <h1>  Hello {props.name} ! </h1>
+    return <h1>  Hello {props.age} ! </h1>
 }
 
 export default Greet;