From 2c4fe318812ddda722790e74367ce02864ee4c00 Mon Sep 17 00:00:00 2001
From: dachi <ar.19920223@gmail.com>
Date: Tue, 26 Feb 2019 00:46:42 +0900
Subject: [PATCH] React Hooks with Flux

---
 react-hooks-with-flux/src/App.js              | 42 +++++++------------
 react-hooks-with-flux/src/Counter.js          | 14 +++++++
 .../src/actions/CounterActions.js             | 13 ++++++
 .../src/contexts/CounterContext.js            |  6 +++
 .../src/reducers/CounterReducer.js            | 10 +++++
 5 files changed, 59 insertions(+), 26 deletions(-)
 create mode 100644 react-hooks-with-flux/src/Counter.js
 create mode 100644 react-hooks-with-flux/src/actions/CounterActions.js
 create mode 100644 react-hooks-with-flux/src/contexts/CounterContext.js
 create mode 100644 react-hooks-with-flux/src/reducers/CounterReducer.js

diff --git a/react-hooks-with-flux/src/App.js b/react-hooks-with-flux/src/App.js
index 7e261ca..f9d2485 100755
--- a/react-hooks-with-flux/src/App.js
+++ b/react-hooks-with-flux/src/App.js
@@ -1,28 +1,18 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useReducer } from 'react'
+import Counter from './Counter'
+import CounterContext from './contexts/CounterContext'
+import CounterReducer from './reducers/CounterReducer'
+import './App.css'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
-    );
-  }
+export default function App() {
+  const [state, dispatch] = useReducer(CounterReducer, { count: 0 })
+  return (
+    <div className="App">
+      <header className="App-header">
+        <CounterContext.Provider value={{ ...state, dispatch }}>
+          <Counter />
+        </CounterContext.Provider>
+      </header>
+    </div>
+  )
 }
-
-export default App;
diff --git a/react-hooks-with-flux/src/Counter.js b/react-hooks-with-flux/src/Counter.js
new file mode 100644
index 0000000..354afcb
--- /dev/null
+++ b/react-hooks-with-flux/src/Counter.js
@@ -0,0 +1,14 @@
+import React, { useContext } from 'react'
+import CounterContext from './contexts/CounterContext'
+import { increment, decrement } from './actions/CounterActions'
+
+export default function Counter() {
+  const { count, dispatch } = useContext(CounterContext)
+  return (
+    <>
+      <h2>{count}</h2>
+      <button onClick={() => increment(dispatch)}>Increment</button>
+      <button onClick={() => decrement(dispatch)}>Decrement</button>
+    </>
+  )
+}
diff --git a/react-hooks-with-flux/src/actions/CounterActions.js b/react-hooks-with-flux/src/actions/CounterActions.js
new file mode 100644
index 0000000..4b9c486
--- /dev/null
+++ b/react-hooks-with-flux/src/actions/CounterActions.js
@@ -0,0 +1,13 @@
+export function increment(dispatch) {
+  dispatch({
+    type: 'increment',
+    payload: {}
+  })
+}
+
+export function decrement(dispatch) {
+  dispatch({
+    type: 'decrement',
+    payload: {}
+  })
+}
diff --git a/react-hooks-with-flux/src/contexts/CounterContext.js b/react-hooks-with-flux/src/contexts/CounterContext.js
new file mode 100644
index 0000000..68d751c
--- /dev/null
+++ b/react-hooks-with-flux/src/contexts/CounterContext.js
@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+
+export default createContext({
+  count: 0,
+  dispatch: null
+})
diff --git a/react-hooks-with-flux/src/reducers/CounterReducer.js b/react-hooks-with-flux/src/reducers/CounterReducer.js
new file mode 100644
index 0000000..dc02473
--- /dev/null
+++ b/react-hooks-with-flux/src/reducers/CounterReducer.js
@@ -0,0 +1,10 @@
+export default function CounterReducer(state, action) {
+  switch (action.type) {
+    case 'increment':
+      return { count: state.count + 1 }
+    case 'decrement':
+      return { count: state.count - 1 }
+    default:
+      return state
+  }
+}