ice-lab · alvinhui · Feb 16, 2020 · Feb 11, 2020 · Feb 11, 2020 · Feb 11, 2020
diff --git a/README.md b/README.md
diff --git a/README.zh-CN.md b/README.zh-CN.md
diff --git a/examples/todos-ts/package.json b/examples/todos-ts/package.json
diff --git a/examples/todos-ts/public/index.html b/examples/todos-ts/public/index.html
diff --git a/examples/todos-ts/src/index.tsx b/examples/todos-ts/src/index.tsx
diff --git a/examples/todos-ts/src/stores/index.ts b/examples/todos-ts/src/stores/index.ts
diff --git a/examples/todos-ts/src/stores/todos.ts b/examples/todos-ts/src/stores/todos.ts
diff --git a/examples/todos-ts/src/stores/user.ts b/examples/todos-ts/src/stores/user.ts
diff --git a/examples/todos-ts/.gitignore → examples/todos/.gitignore b/examples/todos-ts/.gitignore → examples/todos/.gitignore
diff --git a/examples/todos-ts/ice.config.js → examples/todos/ice.config.js b/examples/todos-ts/ice.config.js → examples/todos/ice.config.js
diff --git a/examples/todos/package.json b/examples/todos/package.json
@@ -2,14 +2,15 @@
   "name": "todos",
   "version": "1.0.0",
   "private": true,
-  "main": "src/index.js",
   "dependencies": {
-    "@ice/store": "^0.4.x",
-    "@ice/store-logger": "^0.1.x",
+    "@ice/store": "^1.0.0",
     "react": "16.8.6",
     "react-dom": "16.8.6"
   },
   "devDependencies": {
+    "css-modules-typescript-loader": "^2.0.4",
+    "ice-plugin-fusion": "^0.1.4",
+    "ice-plugin-moment-locales": "^0.1.0",
     "ice-scripts": "^2.0.0"
   },
   "scripts": {

diff --git a/examples/todos/src/components/TodoAdd.tsx b/examples/todos/src/components/TodoAdd.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import store from '../store';
+
+const { useModelActions } = store;
+
+export default function TodoAdd() {
+  const { add } = useModelActions('todos');
+
+  console.debug('TodoAdd rending...');
+  return (
+    <input
+      onKeyDown={(event) => {
+        if (event.keyCode === 13) {
+          add({
+            name: event.currentTarget.value,
+          });
+          event.currentTarget.value = '';
+        }
+      }}
+      placeholder="Press Enter"
+    />
+  );
+}
diff --git a/examples/todos/src/components/TodoList.tsx b/examples/todos/src/components/TodoList.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import store from '../store';
+
+const { useModel, useModelActionsState } = store;
+
+export function TodoList({ title, subTitle, dataSource }, { toggle, remove }, actionsState) {
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>
+        Now is using {subTitle}.
+      </p>
+      <ul>
+        {dataSource.map(({ name, done = false }, index) => (
+          <li key={index}>
+            <label>
+              <input
+                type="checkbox"
+                checked={done}
+                onChange={() => toggle(index)}
+              />
+              {done ? <s>{name}</s> : <span>{name}</span>}
+            </label>
+            {
+              actionsState.remove.isLoading ?
+                '...deleting...' :
+                <button type="submit" onClick={() => remove(index)}>-</button>
+            }
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function({ title }) {
+  const [ state, actions ] = useModel('todos');
+  const actionsState = useModelActionsState('todos');
+  return TodoList(
+    { ...state, title, subTitle: 'Function Component' },
+    actions,
+    actionsState,
+  );
+}