From 623a5f02802976bbaa25cd3e98d9cfc44679dd6c Mon Sep 17 00:00:00 2001
From: seognil LC <seognil@gmail.com>
Date: Fri, 10 Jul 2020 18:23:45 +0800
Subject: [PATCH] feat(add): react-redux hooks version

---
 react-redux/hooks-only/package.json   | 15 +++++++++
 react-redux/hooks-only/src/index.html |  2 ++
 react-redux/hooks-only/src/script.tsx | 47 +++++++++++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 react-redux/hooks-only/package.json
 create mode 100644 react-redux/hooks-only/src/index.html
 create mode 100644 react-redux/hooks-only/src/script.tsx

diff --git a/react-redux/hooks-only/package.json b/react-redux/hooks-only/package.json
new file mode 100644
index 0000000..d9dc306
--- /dev/null
+++ b/react-redux/hooks-only/package.json
@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "^14.0.20",
+    "@types/react": "^16.9.41",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "typescript": "^3.9.6"
+  }
+}
diff --git a/react-redux/hooks-only/src/index.html b/react-redux/hooks-only/src/index.html
new file mode 100644
index 0000000..2ec00e1
--- /dev/null
+++ b/react-redux/hooks-only/src/index.html
@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script src="script.tsx"></script>
diff --git a/react-redux/hooks-only/src/script.tsx b/react-redux/hooks-only/src/script.tsx
new file mode 100644
index 0000000..52a3996
--- /dev/null
+++ b/react-redux/hooks-only/src/script.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { createStore, Reducer } from 'redux';
+import { Provider, useSelector, useDispatch, useStore } from 'react-redux';
+
+// * ------------------------------------------------
+
+type MyState = { val: number };
+
+// * ----------------
+
+const reducer: Reducer<MyState, { type: string; payload: number }> = (
+  state = { val: 0 },
+  action,
+) => ({ val: state.val + (action.payload ?? 0) });
+const store = createStore(reducer);
+
+// * ------------------------------------------------
+
+const App: React.FC = () => {
+  return (
+    <Provider store={store}>
+      <Comp />
+    </Provider>
+  );
+};
+
+// * ----------------
+
+const Comp: React.FC = () => {
+  const store = useStore<MyState>();
+  const val = useSelector<MyState, number>((state) => state.val);
+  const dispatch = useDispatch();
+
+  return (
+    <div>
+      <h3>Hello react-redux</h3>
+      <button onClick={() => dispatch({ type: 'any', payload: 1 })}> add 1 </button>
+      <p>useSelector mapped: {val}</p>
+      <p>store.getState().val: {store.getState().val} </p>
+    </div>
+  );
+};
+
+// * ------------------------------------------------
+
+ReactDOM.render(<App />, document.querySelector('#app'));