feat: icestore docs upgrade (#2966)

* feat: upgrade icestore docs for 0.4.x

* feat: update js codeSandbox link

docs/icestore/about.md

@@ -13,6 +13,7 @@ order: 1
 
 * **极简 API**：只有 5 个 API，简单上手，使用方便，不需要学习 Redux 里的各种概念。
 * **React Hooks**：拥抱 Hooks 的使用体验，支持在函数式组件中使用。
+* **Typescript 支持**：提供完整的 Typescript 类型定义，在 VSCode 中能获得完整的类型推导的提示。
 * **集成异步状态**：记录异步 action 的执行状态，简化 view 组件中对于 loading 与 error 状态的渲染逻辑。
 * **性能优化**：通过多 store 的去中心化设计，减少单个 state 变化触发重新渲染的组件个数，从而减少不必要的渲染。
 * **单向数据流**：与 Redux 一样使用单向数据流，便于状态的追踪与预测。

docs/icestore/guide/concept.md

@@ -34,18 +34,22 @@ action 表示改变状态的行为，支持定义同步与异步 action，在 ac
 
 ``` javascript
 import Icestore from '@ice/store';
-const stores = new Icestore(); // 初始化 store 管理器实例
+const storeManager = new Icestore(); // 初始化 store 管理器实例
 ```
 
 <img src="https://user-images.githubusercontent.com/5419233/63601116-6e526b80-c5f7-11e9-9e69-cad4f37e1f2c.png" width="350" />
 
 
-## registerStore
+## registerStores
 
 store 对象定义好后，通过 registerStore 将 store 对象注册到全局的 store 管理器实例上，允许注册多个 store。
 
 ``` javascript
-stores.registerStore('todos', todos); // 通过 namespace 区分不同的 store
+const stores = storeManager.registerStores({
+  todos,
+}); // 通过 namespace 区分不同的 store
+
+export default stores;
 ```
 
 ## useStore
@@ -55,12 +59,16 @@ icestore 提供 useStore hook 供函数式组件使用，可以通过 useStore 
 ``` javascript
 
 // viewA.jsx
+import stores from './stores';
+
 const { fetchData } = stores.useStore('todo'); // 通过 namespace 访问注册的 store
 useEffect(() => {
   fetchData(); //  action 调用后触发组件 viewA 和 viewB 重新渲染
 }, []);
 
 // viewB.jsx
+import stores from './stores';
+
 const { dataSource } = stores.useStore('todo'); // viewA 组件中的 fetchData action 调用后触发 viewB 组件重新渲染，dataSource 值更新到最新
 
 return (

docs/icestore/reference/api.md

@@ -5,15 +5,30 @@ order: 1
 
 对于新建的 icestore 实例，包括以下公共的 API 方法：
 
-### registerStore
+### registerStores
 
-将 store 配置注册到全局 store 实例。
+注册多个 store 配置到全局 icestore 实例上。
 
 * 参数
-  - namespace {string} store 的命名空间
-  - bindings {object} store 配置，包含 state 和 actions
+  - stores {object} 多个 store 的配置对象，每个 store 配置中包含 state 和 action
+
 * 返回值
-  - {object} store 实例
+  - {object} stores 管理器对象，包含以下几个方法
+      - useStore {function} 使用单个 store 的 hook
+          - 参数
+             - namespace {string} store 的命名空间
+          - 返回值
+             - {object} store 的配置对象
+      - useStores {function} 同时使用多个 store 的 hook
+          - 参数
+              - namespaces {array} 多个 store 的命名空间数组
+          - 返回值
+              - {object} 多个 store 的配置对象，以 namespace 区分
+      - getState {function} 获取单个 store 的最新 state 对象。
+          - 参数
+              - namespace {string} store 的命名空间
+          - 返回值
+              - {object} store 的 state 对象
 
 ### applyMiddleware
 
@@ -24,31 +39,3 @@ order: 1
   - namespace {string} store 的命名空间，可选
 * 返回值
   - 无
-
-### useStores
-
-同时使用多个 store 的 hook。
-
-* 参数
-  - namespaces {array} 多个 store 的命名空间数组
-* 返回值
-  - {array} 多个 store 的配置对象数组
-
-### useStore
-
-使用单个 store 的 hook。
-
-* 参数
-  - namespace {string} store 的命名空间
-* 返回值
-  - {object} store 的配置对象
-
-### getState
-
-获取单个 store 的最新 state 对象。
-
-* 参数
-  - namespace {string} store 的命名空间
-* 返回值
-  - {object} store 的 state 对象
-

docs/icestore/reference/migrate.md

@@ -3,7 +3,7 @@ title: 版本升级
 order: 2
 ---
 
-icestore 目前共发布了 3 个大版本，不同版本间的非兼容性更新主要在于 action 返回值这块，为便于演示，首先我们假定某个项目的目录结构如下：
+icestore 目前共发布了 4 个大版本，为便于演示不同版本之间的差异，首先我们假定某个项目的目录结构如下：
 
 ```bash
 ├── src/
@@ -92,6 +92,23 @@ useEffect(() => {
 });
 ```
 
+## 0.4.x
+
+* 提供了对 Typescript 的支持，新增 registerStores API，一次性注册多个 Store
+* 由于 Typescript 支持的需要，useStore/useStores/getState API 通过 registerStores 返回值来取，同时 useStores 的返回值从数组变成对象
+* 考虑到向下兼容，原 icestore 实例上的 useStore/useStores/getState 这几个 API 设为 deprecated，在下个版本中将删除
+
+```
+// stores/index.ts
+
+const stores = icestore.registerStores({todos});
+export default stores;
+
+// home/index.tsx
+import stores from './stores';
+const {todos} = stores.useStores(['todos']);
+```
+
 ## 升级指南
 
 由于上面所述的非兼容性变更，请按以下方式升级到最新版本：
@@ -123,3 +140,42 @@ const newA = fooStore.updateA(3); // 通过 action 返回值拿最新的 a 值
 const { a } = stores.getState('foo'); // 通过 getState API 拿最新的 a 值
 
 ```
+
+### 0.3.x -> 0.4.x
+
+可平滑升级，代码不需要改动，但是为了 Typescript 编程体验与未来版本考虑，建议使用新的 registerStores API 来注册与 useStore，升级方式如下：
+
+1. 使用 registerStores 来替代原来的 registerStore API 注册 store，同时将 registerStores 的返回值 export 出去而不是 export icestore 实例
+
+```javascript
+// 变更前
+// stores/index.ts
+icestore.registerStore('todos', todos);
+icestore.registerStore('foo', foo);
+export default icestore;
+
+// 变更后
+// stores/index.ts
+
+const stores = icestore.registerStores({
+  todos,
+  foo,
+});
+export default stores;
+```
+
+2. 检查是否使用到 useStores API，如果有用到，将返回值从数组改成对象
+
+```javascript
+// 变更前
+// home/index.tsx
+import stores from './stores';
+
+const [todos, foo] = stores.useStores();
+
+// 变更后
+// home/index.tsx
+import stores from './stores';
+
+const {todos, foo} = stores.useStores();
+```

docs/icestore/start.md

@@ -66,9 +66,11 @@ import todos from './todos';
 import Store from '@ice/store';
 
 const storeManager = new Store();
-storeManager.registerStore('todos', todos);
+const stores = storeManager.registerStores({
+  todos
+});
 
-export default storeManager;
+export default stores;
 ```
 
 ## State 与 View 绑定
@@ -133,4 +135,7 @@ function Todo() {
 ReactDOM.render(<Todo />, document.getElementById('root'));
 ```
 
-完整示例请参考线上 [codesandbox](https://codesandbox.io/s/icestore-hs9fe)。
+完整示例请参考线上 [codesandbox](https://codesandbox.io/s/icestore-ltpuo)。
+
+## Typescript 支持
+icestore 提供了完整的 Typescript 类型定义，在 VSCode 中能获得完整的类型推导的提示，示例请参考该线上 [CodeSandbox](https://codesandbox.io/s/icestore-ts-gduqw) 示例。