From 5bf58a1d73e16372134af93941ce734c6d39e35a Mon Sep 17 00:00:00 2001
From: seognil LC <seognil@gmail.com>
Date: Sun, 5 Jul 2020 15:45:12 +0800
Subject: [PATCH] feat(add): redux-react-hook simple

---
 redux-react-hook/example-simple/package.json  | 14 ++++++++++
 redux-react-hook/example-simple/src/app.tsx   | 25 +++++++++++++++++
 .../example-simple/src/index.html             |  2 ++
 redux-react-hook/example-simple/src/index.tsx | 11 ++++++++
 redux-react-hook/example-simple/src/store.ts  | 28 +++++++++++++++++++
 5 files changed, 80 insertions(+)
 create mode 100644 redux-react-hook/example-simple/package.json
 create mode 100644 redux-react-hook/example-simple/src/app.tsx
 create mode 100644 redux-react-hook/example-simple/src/index.html
 create mode 100644 redux-react-hook/example-simple/src/index.tsx
 create mode 100644 redux-react-hook/example-simple/src/store.ts

diff --git a/redux-react-hook/example-simple/package.json b/redux-react-hook/example-simple/package.json
new file mode 100644
index 0000000..35a4421
--- /dev/null
+++ b/redux-react-hook/example-simple/package.json
@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "start": "parcel src/index.html"
+  },
+  "devDependencies": {
+    "typescript": "^3.9.6"
+  },
+  "dependencies": {
+    "react": "^16.8.1",
+    "react-dom": "^16.13.1",
+    "redux": "^4.0.5",
+    "redux-react-hook": "^4.0.1"
+  }
+}
diff --git a/redux-react-hook/example-simple/src/app.tsx b/redux-react-hook/example-simple/src/app.tsx
new file mode 100644
index 0000000..ab84326
--- /dev/null
+++ b/redux-react-hook/example-simple/src/app.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {useDispatch, useMappedState} from './store';
+
+export const App: React.FC = () => {
+  const appData = useMappedState((state) => ({
+    value: state.val,
+    times: state.count,
+  }));
+
+  const dispatch = useDispatch();
+
+  return (
+    <div>
+      <button onClick={() => dispatch({type: 'plus', payload: 2})}>
+        plus 2
+      </button>
+      <button onClick={() => dispatch({type: 'minus', payload: 1})}>
+        minus 1
+      </button>
+
+      <p>value is: {appData.value}</p>
+      <p>change times: {appData.times}</p>
+    </div>
+  );
+};
diff --git a/redux-react-hook/example-simple/src/index.html b/redux-react-hook/example-simple/src/index.html
new file mode 100644
index 0000000..3871f15
--- /dev/null
+++ b/redux-react-hook/example-simple/src/index.html
@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script src="index.tsx"></script>
diff --git a/redux-react-hook/example-simple/src/index.tsx b/redux-react-hook/example-simple/src/index.tsx
new file mode 100644
index 0000000..0691c28
--- /dev/null
+++ b/redux-react-hook/example-simple/src/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import {StoreContext, myStore} from './store';
+import {App} from './app';
+
+ReactDOM.render(
+  <StoreContext.Provider value={myStore}>
+    <App />
+  </StoreContext.Provider>,
+  document.getElementById('app'),
+);
diff --git a/redux-react-hook/example-simple/src/store.ts b/redux-react-hook/example-simple/src/store.ts
new file mode 100644
index 0000000..b2a8adf
--- /dev/null
+++ b/redux-react-hook/example-simple/src/store.ts
@@ -0,0 +1,28 @@
+import {create} from 'redux-react-hook';
+import {Reducer, createStore} from 'redux';
+
+type MyState = {val: number; count: number};
+
+type MyAction = {
+  type: string;
+  payload: number;
+};
+
+const myReducer: Reducer<MyState, MyAction> = (state, action) =>
+  state === undefined
+    ? {val: 0, count: 0}
+    : {
+        val:
+          action.type === 'plus'
+            ? state.val + action.payload
+            : state.val - action.payload,
+        count: state.count + 1,
+      };
+
+export const myStore = createStore(myReducer);
+
+export const {StoreContext, useDispatch, useMappedState} = create<
+  MyState,
+  MyAction,
+  typeof myStore
+>();