bbx - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.loading = exports.connect = exports.combine = exports.State = undefined;
+exports.latest = exports.update = exports.loading = exports.connect = exports.combine = exports.State = undefined;
 
@@ -25,2 +25,10 @@ var _combine = require('./combine');
 
+var _decoratorUpdate = require('./decorator-update');
+
+var _decoratorUpdate2 = _interopRequireDefault(_decoratorUpdate);
+
+var _decoratorLatest = require('./decorator-latest');
+
+var _decoratorLatest2 = _interopRequireDefault(_decoratorLatest);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,2 +39,4 @@
 exports.connect = _reactConnect2.default;
-exports.loading = _decoratorLoading2.default;
+exports.loading = _decoratorLoading2.default;
+exports.update = _decoratorUpdate2.default;
+exports.latest = _decoratorLatest2.default;

package.json

 {
   "name": "bbx",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "极简单的React状态管理方法",
@@ -8,6 +8,6 @@ "main": "lib/index.js",
     "build": "babel src --out-dir lib",
-    "test": "npm run lint && jest",
+    "test": "jest",
     "lint": "eslint src test",
     "precommit": "npm run lint",
-    "pub": "npm test && npm run build && npm publish"
+    "pub": "npm run lint && npm test && npm run build && npm publish"
   },
@@ -14,0 +14,0 @@ "author": "https://github.com/zinkey",

README.md

@@ -1,13 +0,13 @@
-## 中文 README.md
+# 中文 README.md
 
-bbx 是一个极其简单高效的 React 状态管理方式
+𝕓𝕓𝕩 是一个极其简单高效的 React 状态管理方式
 
-### 特点
+## 特点
 
-- **简单**: 了解 api 基本没成本，会用 React 即会用 bbx
-- **清晰**: state 全程可监控
-- **扩展**: 采用类的继承可扩展更多的功能
+- **简单:baby:**: 了解 api 基本没成本，会用 React 即会用 bbx
+- **清晰:sun_with_face:**: state 全程可监控
+- **扩展:hatching_chick:**: 采用类的继承可扩展更多的功能
 
 
-### 使用
+## 使用
 
@@ -47,4 +47,4 @@ 1. 建立一个状态类，继承于 bbx State
     return <div>
-      <p>{user.name}</p>
-      <p>{user.age}</p>
+      <p>{user.state.name}</p>
+      <p>{user.state.age}</p>
     </div>;
@@ -57,3 +57,3 @@ }
 
-4. 修改下 User 类，添加一个 getUser 的方法
+4. 修改下 User 类，添加一个请求用户的方法
 
@@ -97,4 +97,4 @@ ```js
     return <div>
-      <p>{user.name}</p>
-      <p>{user.age}</p>
+      <p>{user.state.name}</p>
+      <p>{user.state.age}</p>
     </div>;
@@ -110,8 +110,144 @@ }
 
-### 进阶
+## 进阶
 
-在了解了 “使用” 后，已经能上手开发项目了，而以下的内容是进一步了解 bbx 的更多能力
+在了解了 “使用” 后，已经能上手开发项目了，而以下的内容是进一步了解 bbx 的更多能力。
 
-- setState 调用流程
 
+#### 1. loading
+
+还是之前的示例：
+
+```js
+import { connect } from 'bbx';
+
+@connect(user)
+class App extends React.Component {
+  componentDidMount() {
+    user.requestUser();
+  }
+  render() {
+    return <div>
+      <p>{user.state.name}</p>
+      <p>{user.state.age}</p>
+    </div>;
+  }
+}
+```
+
+因为 requestUser 是一个异步方法，那在请求返回前，想要在界面上加一个 loading 告诉用户正在请求，这个要怎么做呢？
+
+比较简单的方式修改 requestUser 方法，在请求前加一个属性表示正在请求，之后再修改这个属性表示请求完成。
+
+```js
+  async requestUser() {
+    // 添加一个 requestUserLoading 用来表示是否在 loading
+    this.setState({
+      requestUserLoading: true;
+    });
+
+    const { name, age } = await request('/api/user.json');
+    this.setState({
+      name,
+      age,
+    });
+
+    // 请求完成，requestUserLoading 改为 false
+    this.setState({
+      requestUserLoading: false;
+    });
+  }
+```
+
+之后在 App 里就能使用了：
+
+```js
+import { connect } from 'bbx';
+
+@connect(user)
+class App extends React.Component {
+  componentDidMount() {
+    user.requestUser();
+  }
+  render() {
+    return user.state.requestUserLoading ?
+      <div>
+        loading...
+      </div>
+      :
+      <div>
+        <p>{user.state.name}</p>
+        <p>{user.state.age}</p>
+      </div>;
+  }
+}
+```
+
+但是，要是有不少异步方法都要去改？
+
+bbx 提供了 loading 来简化：
+
+```js
+import { loading } from 'bbx';
+
+...
+  @loading
+  async requestUser() {
+    const { name, age } = await request('/api/user.json');
+    this.setState({
+      name,
+      age,
+    });
+  }
+...
+```
+
+只用在方法前使用 @loading，即可在 state 里添加一个 “方法名Loading” 的属性。
+
+
+#### 2. lastest
+
+前端开发中经典的问题之一：分页请求顺序问题。
+
+在网络请求比较慢的情况下，用户可能点击了几个页面，但是只会用到最后一个页面。比如用户连续点击了第2页、第4页，页面会发起两个请求，要是不做处理，ui 可能会展示到后返回的，也可能会页面闪动。
+
+简单描述就是：顺序执行异步操作（比如一个请求），忽略前面的，只用最后一个的。bbx 提供了 lastest 来方便开发。
+
+比如以下示例，不管是否网络比较慢，用户怎么点击, ui 都会展示最后点击按钮对应的用户。
+
+```js
+...
+import { latest } from 'bbx';
+
+// State
+@latest
+async getUser(id) {
+  const { name, age } = await request(`/api/user.json?id=${id}`);
+  this.setState({
+    name,
+    age,
+  });
+}
+
+// App
+render() {
+  render <div>
+    
+    用户：
+    <h1>{user.state.name} {user.state.age}</h1>
+    
+    按钮组：
+	<button onClick={() => user.getUser(1)}>用户1</button>
+	<button onClick={() => user.getUser(2)}>用户2</button>
+	<button onClick={() => user.getUser(3)}>用户3</button>
+  
+  </div>;
+}
+...
+```
+
+demo：https://stackblitz.com/edit/bbx-example-latest
+
+
+#### 3. setState 调用流程
+
 当调用 this.setState，都会有以下方法调用流程
@@ -138,3 +274,3 @@
 
-- TOTO 说明 loading
+- TOTO 说明 update
 
@@ -144,2 +280,3 @@ ### 更多示例
 - count https://stackblitz.com/edit/bbx-example-count
-- async https://stackblitz.com/edit/bbx-example-async
+- async https://stackblitz.com/edit/bbx-example-async
+- latest https://stackblitz.com/edit/bbx-example-latest

No alert changes

Improved metrics

Total package byte prevSize

25253

increased by63.05%

Number of package files

9

increased by28.57%

Lines of code

373

increased by54.13%

Number of lines in readme file

276

increased by98.56%

No dependency changes