Update README to add effects demonstration of mirror.model API

README.md

@@ -4,7 +4,7 @@
 
 [以中文查看](https://github.com/mirrorjs/mirror/blob/master/README_zh.md)
 
-A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by [dva](https://github.com/dvajs/dva) and [jumpsuit](https://github.com/jumpsuit/jumpsuit))
+A simple and powerful React framework with minimal API and zero boilerplate. (Inspired by [dva](https://github.com/dvajs/dva) and [jumpsate](https://github.com/jumpsuit/jumpstate))
 
 > Painless React and Redux.
 
@@ -33,7 +33,7 @@ You don't have to learn some new things to get started with Mirror, the only req
 
 * **Simple actions, sync or async**
 
-No manually created action types or action creators, no explicitly `dispatch`s, no thunk or saga stuff -- just [call a function to dispatch your actions](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#actions).
+No manually created `action type`s or `action creator`s, no explicitly `dispatch`s, no `redux-thunk` or `redux-saga` or `mobx` -- just [call a function to dispatch your actions](https://github.com/mirrorjs/mirror/blob/master/docs/api.md#actions).
 
 * **Support loading models dynamically**
 
@@ -75,11 +75,17 @@ mirror.model({
   name: 'app',
   initialState: 0,
   reducers: {
-    increment(state) {
-      return state + 1
-    },
-    decrement(state) {
-      return state - 1
+    increment(state) { return state + 1 },
+    decrement(state) { return state - 1 }
+  },
+  effects: {
+    async incrementAsync() {
+      await new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve()
+        }, 1000)
+      })
+      actions.app.increment()
     }
   }
 })
@@ -90,14 +96,16 @@ const App = connect(state => {
 })(props => (
     <div>
       <h1>{props.count}</h1>
-      {/* dispatch the action */}
+      {/* dispatch the actions */}
       <button onClick={() => actions.app.decrement()}>-</button>
       <button onClick={() => actions.app.increment()}>+</button>
+      {/* dispatch the async action */}
+      <button onClick={() => actions.app.incrementAsync()}>+ Async</button>
     </div>
   )
 )
 
-// start the app
+// start the app，`render` is the enhanced `ReactDOM.render`
 render(<App/>, document.getElementById('root'))
 ```
 

README_zh.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/mirrorx.svg?style=flat-square)](https://www.npmjs.com/package/mirrorx) [![build status](https://img.shields.io/travis/mirrorjs/mirror.svg?style=flat-square)](https://travis-ci.org/mirrorjs/mirror) [![coverage status](https://img.shields.io/coveralls/mirrorjs/mirror.svg?style=flat-square)](https://coveralls.io/github/mirrorjs/mirror?branch=master)
 
-一款简洁、高效、易上手的 React 框架。（Inspired by [dva](https://github.com/dvajs/dva) and [jumpsuit](https://github.com/jumpsuit/jumpsuit)）
+一款简洁、高效、易上手的 React 框架。（Inspired by [dva](https://github.com/dvajs/dva) and [jumpsate](https://github.com/jumpsuit/jumpstate)）
 
 > Painless React and Redux.
 
@@ -31,7 +31,7 @@ Mirror 是一款基于 [React](https://facebook.github.io/react)，[Redux](http:
 
 * **Redux action 从未如此简单**
 
-无需手动创建 `action type` 或者 `action creator`，无需明确调用 `dispatch` 方法，无需使用 redux-thunk 或者 redux-saga 来处理异步 action——只需[调用一个函数即可 `dispatch` 你的 `action`](https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md#actions)，无论是同步还是异步的 action。
+无需手动创建 `action type` 或者 `action creator`，无需明确调用 `dispatch` 方法，无需使用 `redux-thunk` 或者 `redux-saga` 或者 `mobx` 来处理异步 action——只需[调用一个函数即可 `dispatch` 你的 `action`](https://github.com/mirrorjs/mirror/blob/master/docs/zh/api.md#actions)，无论是同步还是异步的 action。
 
 * **支持动态创建 model**
 
@@ -73,11 +73,17 @@ mirror.model({
   name: 'app',
   initialState: 0,
   reducers: {
-    increment(state) {
-      return state + 1
-    },
-    decrement(state) {
-      return state - 1
+    increment(state) { return state + 1 },
+    decrement(state) { return state - 1 }
+  },
+  effects: {
+    async incrementAsync() {
+      await new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve()
+        }, 1000)
+      })
+      actions.app.increment()
     }
   }
 })
@@ -91,6 +97,8 @@ const App = connect(state => {
       {/* 调用 actions 上的方法来 dispatch action */}
       <button onClick={() => actions.app.decrement()}>-</button>
       <button onClick={() => actions.app.increment()}>+</button>
+      {/* dispatch async action */}
+      <button onClick={() => actions.app.incrementAsync()}>+ Async</button>
     </div>
   )
 )

examples/counter/package.json

@@ -7,7 +7,7 @@
     "build": "cross-env NODE_ENV=production webpack -p"
   },
   "dependencies": {
-    "mirrorx": "^0.1.0",
+    "mirrorx": "^0.2.0",
     "prop-types": "^15.5.10",
     "react": "^15.0.0",
     "react-dom": "^15.0.0"

examples/simple-router/package.json

@@ -7,7 +7,7 @@
     "build": "cross-env NODE_ENV=production webpack -p"
   },
   "dependencies": {
-    "mirrorx": "^0.1.0",
+    "mirrorx": "^0.2.0",
     "prop-types": "^15.5.10",
     "react": "^15.0.0",
     "react-dom": "^15.0.0"

examples/todo/package.json

@@ -7,7 +7,7 @@
     "build": "cross-env NODE_ENV=production webpack -p"
   },
   "dependencies": {
-    "mirrorx": "^0.1.0",
+    "mirrorx": "^0.2.0",
     "prop-types": "^15.5.10",
     "react": "^15.0.0",
     "react-dom": "^15.0.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirrorx",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A React framework with minimal API and zero boilerplate.",
   "scripts": {
     "test": "jest",