Release 1.4.0 (#103)

* chore: new version * fix: add meta type in ModelEffects (#102) * Add @ice/store Unit Test (#84) * chore: add dependency * test: add helper and init test * test: add createStore test * test: add withModel withModelActions withModelEffectsState test * test: add throw error when getting unexist model * chore: new version * test: add global actions test * test: add createModel test * test: add createUseContainer test * chore: createModel * test: add createContainer test * test: update test cases * test: add useModel test * test: add class component test * test: update class component test * test: add createStore options test * test: add appendReducer test * test: add appendReducer test * chore: lint * test: add utils test * docs: add badge * chore: remove unnecessary comment * test: update converter test * feat: add comment to pr * fix: fix by the comments * chore: update codecov config * test: update test * test: update converter test case * test: update examples * test: update todos example * chore: update modelEffects type Co-authored-by: alvinhui <[email protected]> * fix: effects should return an object (#105) * fix: effects should return an object * chore: lint * Better example (#106) * chore: add classComponent example * chore: rename async function * chore: visibility logic * docs: add examples section * feat: withModel (#104) * feat: withModel init * refactor: model apis * feat: model for withModel * feat: ts support for withModel * chore: typo * chore: lint * test: disable loading and error * test: mock value * chore: playload && meta is option * chore: typo * docs: withModel * refactor: class and function component demo * chore: class component support * chore: remove console * chore: lint * chore: withModel example * chore: remove product * chore: undo * chore: typo * Docs: Migrating From Redux (#108) * chore: example @ice/store version Co-authored-by: Hengchang Lu <[email protected]>
ice-lab · Apr 24, 2020 · abf623e · abf623e
1 parent 04bc60e
commit abf623e
Show file tree

Hide file tree

Showing 100 changed files with 2,935 additions and 567 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ English | [简体中文](./README.zh-CN.md)
 [![NPM downloads](http://img.shields.io/npm/dm/@ice/store.svg?style=flat)](https://npmjs.org/package/@ice/store)
 [![Known Vulnerabilities](https://snyk.io/test/npm/@ice/store/badge.svg)](https://snyk.io/test/npm/@ice/store)
 [![David deps](https://img.shields.io/david/ice-lab/icestore.svg?style=flat-square)](https://david-dm.org/ice-lab/icestore)
+[![codecov](https://codecov.io/gh/ice-lab/icestore/branch/master/graph/badge.svg)](https://codecov.io/gh/ice-lab/icestore)
 
 <table>
   <thead>
@@ -53,7 +54,7 @@ const counter = {
     decrement:(prevState) => prevState - 1,
   },
   effects: () => ({
-    async decrementAsync() {
+    async asyncDecrement() {
       await delay(1000);
       this.decrement();
     },
@@ -71,12 +72,12 @@ const store = createStore(models);
 const { useModel } = store;
 function Counter() {
   const [ count, dispatchers ] = useModel('counter');
-  const { increment, decrementAsync } = dispatchers;
+  const { increment, asyncDecrement } = dispatchers;
   return (
     <div>
       <span>{count}</span>
       <button type="button" onClick={increment}>+</button>
-      <button type="button" onClick={decrementAsync}>-</button>
+      <button type="button" onClick={asyncDecrement}>-</button>
     </div>
   );
 }
@@ -103,17 +104,19 @@ icestore requires React 16.8.0 or later.
 npm install @ice/store --save
 ```
 
-## API
+## Documents
 
-[docs/api](./docs/api.md)
+- [API](./docs/api.md)
+- [Recipes](./docs/recipes.md)
+- [Upgrade Guidelines](./docs/upgrade-guidelines.md)
+- [Migration](./docs/migration.md)
 
-## Recipes
+## Examples
 
-[docs/recipes](./docs/recipes.md)
-
-## Upgrade Guidelines
-
-[docs/upgrade-guidelines](./docs/upgrade-guidelines.md)
+- [Counter](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/counter)
+- [Todos](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/todos)
+- [Class Component Support](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/classComponent)
+- [withModel](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/withModel)
 
 ## Browser Compatibility
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -10,6 +10,7 @@
 [![NPM downloads](http://img.shields.io/npm/dm/@ice/store.svg?style=flat)](https://npmjs.org/package/@ice/store)
 [![Known Vulnerabilities](https://snyk.io/test/npm/@ice/store/badge.svg)](https://snyk.io/test/npm/@ice/store)
 [![David deps](https://img.shields.io/david/ice-lab/icestore.svg?style=flat-square)](https://david-dm.org/ice-lab/icestore)
+[![codecov](https://codecov.io/gh/ice-lab/icestore/branch/master/graph/badge.svg)](https://codecov.io/gh/ice-lab/icestore)
 
 <table>
   <thead>
@@ -53,7 +54,7 @@ const counter = {
     decrement:(prevState) => prevState - 1,
   },
   effects: () => ({
-    async decrementAsync() {
+    async asyncDecrement() {
       await delay(1000);
       this.decrement();
     },
@@ -71,12 +72,12 @@ const store = createStore(models);
 const { useModel } = store;
 function Counter() {
   const [ count, dispatchers ] = useModel('counter');
-  const { increment, decrementAsync } = dispatchers;
+  const { increment, asyncDecrement } = dispatchers;
   return (
     <div>
       <span>{count}</span>
       <button type="button" onClick={increment}>+</button>
-      <button type="button" onClick={decrementAsync}>-</button>
+      <button type="button" onClick={asyncDecrement}>-</button>
     </div>
   );
 }
@@ -103,17 +104,19 @@ ReactDOM.render(<App />, rootElement);
 npm install @ice/store --save
 ```
 
-## API
+## 文档
 
-[docs/api](./docs/api.zh-CN.md)
+- [API](./docs/api.zh-CN.md)
+- [更多技巧](./docs/recipes.zh-CN.md)
+- [从老版本升级](./docs/upgrade-guidelines.zh-CN.md)
+- [从其他方案迁移](./docs/migration.zh-CN.md)
 
-## 更多技巧
+## 示例
 
-[docs/recipes](./docs/recipes.zh-CN.md)
-
-## 从老版本升级
-
-[docs/upgrade-guidelines](./docs/upgrade-guidelines.zh-CN.md)
+- [Counter](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/counter)
+- [Todos](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/todos)
+- [Class Component Support](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/classComponent)
+- [withModel](https://codesandbox.io/s/github/ice-lab/icestore/tree/master/examples/withModel)
 
 ## 浏览器支持
 

diff --git a/codecov.yml b/codecov.yml
@@ -1,4 +1,12 @@
-comment: off
+comment:
+  layout: "reach, diff, flags, files"
+  behavior: default
+  require_changes: false
+  require_base: no
+  require_head: yes
+  branches:
+    - "master"
+
 coverage:
   status:
     project:

diff --git a/docs/api.md b/docs/api.md
@@ -51,25 +51,23 @@ const model = {
 
 ##### reducers
 
-`reducers: { [string]: (prevState, payload) => any }`
+`reducers: { [string]: (state, payload) => any }`
 
 An object of functions that change the model's state. These functions take the model's previous state and a payload, use mutable method to achieve immutable state. These should be pure functions relying only on the state and payload args to compute the next state. For code that relies on the "outside world" (impure functions like api calls, etc.), use effects.
 
+e.g.:
+
 ```js
-const todo = {
+const todos = {
   state: [
     {
-      todo: 'Learn typescript',
+      title: 'Learn typescript',
       done: true,
     },
-    {
-      todo: 'Try immer',
-      done: false,
-    },
   ],
   reducers: {
-    done(state) {
-      state.push({ todo: 'Tweet about it' }); // array updated directly
+    foo(state) {
+      state.push({ title: 'Tweet about it' }); // array updated directly
       state[1].done = true;
     },
   },
@@ -92,11 +90,43 @@ const count = {
 
 See [docs/recipes](./recipes.md#immutable-description) for more details.
 
+The second parameter of reducer is the parameter passed when calling:
+
+```js
+const todos = {
+  state: [
+    {
+      title: 'Learn typescript',
+      done: true,
+    },
+  ],
+  reducers: {
+    // correct
+    add(state, todo) {
+      state.push(todo);
+    },
+    // wrong
+    add(state, title, done) {
+      state.push({ title, done });
+    },
+  },
+};
+
+// use:
+function Component() {
+  const { add } = store.useModelDispathers('todos');
+  function handleClick () {
+    add({ title: 'Learn React', done: false }); // correct
+    add('Learn React', false); // wrong
+  }
+}
+```
+
 ##### effects
 
 `effects: (dispatch) => ({ [string]: (payload, rootState) => void })`
 
-An object of functions that can handle the world outside of the model. Effects provide a simple way of handling async actions when used with async/await. In effects, call `this.reducerFoo` to update model's state:
+An object of functions that can handle the world outside of the model. These functions take payload and rootstate, sprovide a simple way of handling async actions when used with async/await. In effects, call `this.reducerFoo` to update model's state:
 
 ```js
 const counter = {
@@ -105,7 +135,7 @@ const counter = {
     decrement:(prevState) => prevState - 1,
   },
   effects: () => ({
-    async decrementAsync() {
+    async asyncDecrement() {
       await delay(1000); // do some asynchronous operations
       this.decrement(); // pass the result to a local reducer
     },
@@ -397,6 +427,19 @@ export default withModel(
 )(TodoList);
 ```
 
+#### useModelState
+
+`useModelState(name: string): state`
+
+The hooks use the state of the model and subscribe to its updates.
+
+```js
+function FunctionComponent() {
+  const state = useModelState('counter');
+  console.log(state.value);
+}
+```
+
 #### useModelDispatchers
 
 `useModelDispatchers(name: string): dispatchers`
@@ -573,3 +616,71 @@ function FunctionComponent() {
   );
 }
 ```
+
+## withModel
+
+`withModel(model, mapModelToProps?, options?)(ReactFunctionComponent)`
+
+This method is used to quickly use model in component.
+
+```js
+import { withModel } from '@ice/store';
+import model from './model';
+
+function Todos({ model }) {
+  const {
+    useState,
+    useDispatchers,
+    useEffectsState,
+    getState,
+    getDispatchers,
+  } = model;
+  const [ state, dispatchers ] = useValue();
+}
+
+export default withModel(model)(Todos);
+```
+
+### Arguments
+
+#### modelConfig
+
+Consistent with modelConfig in the createStore.
+
+#### mapModelToProps
+
+`mapModelToProps = (model) => ({ model })`
+
+Use this function to customize the value mapped to the component, for example:
+
+```js
+import { withModel } from '@ice/store';
+import model from './model';
+
+function Todos({ todo }) {
+  const [ state, dispatchers ] = todo.useValue();
+}
+
+export default withModel(model, function(model) {
+  return { todo: model };
+})(Todos);
+```
+
+#### options
+
+The same with createStore.
+
+### Returns
+
+- useValue
+- useState
+- useDispathers
+- useEffectsState
+- getValue
+- getState
+- getDispatchers
+- withValue
+- withDispatchers
+- withModelEffectsState
+
+Its usage refers to the return value of createStore.