Merge pull request #2 from byte-fe/develop

Simplify Api

README.md

@@ -28,23 +28,14 @@ npm install git+https://github.com/byte-fe/react-model.git#master
 react-model keep the state and actions in a global store. So you need to register them before using.
 
 ```typescript
-import { useCallback, useContext, useEffect, useState } from 'react'
-import { registerModel } from '../model'
+import { registerModel } from 'react-model'
 import Home from '../model/home.model'
 import Shared from '../model/shared.model'
 
-registerModel(
-  {
-    Home,
-    Shared
-  },
-  {
-    useState,
-    useCallback,
-    useEffect,
-    useContext
-  }
-)
+registerModel({
+  Home,
+  Shared
+})
 ```
 
 ### useStore
@@ -53,7 +44,7 @@ The functional component in React 16.7 can use Hooks to connect the global store
 
 ```javascript
 import React from 'react'
-import { useStore } from '../model'
+import { useStore } from 'react-model'
 
 export default () => {
   const [state, actions] = useStore('Home')
@@ -80,7 +71,7 @@ The global state standalone can not effect the react class components, we need t
 
 ```jsx
 import { PureComponent } from 'react'
-import { Provider } from './model'
+import { Provider } from 'react-model'
 
 class App extends PureComponent {
   render() {
@@ -101,7 +92,7 @@ Javascript decorator version
 
 ```jsx
 import React, { PureComponent } from 'react'
-import { Provider, connect } from '../model'
+import { Provider, connect } from 'react-model'
 
 const mapProps = ({ light, counter }) => ({
   lightStatus: light ? 'open' : 'close',
@@ -130,7 +121,7 @@ TypeScript Version
 
 ```tsx
 import React, { PureComponent } from 'react'
-import { Provider, connect } from '../model'
+import { Provider, connect } from 'react-model'
 import { StateType, ActionType } from '../model/home.model'
 
 const mapProps = ({ light, counter, response }: StateType) => ({

dist/index.js

@@ -75,6 +75,12 @@ var Setter = {
 // will throw Error Hooks can only be called inside the body of a function component
 var hooksApi = {};
 var registerModel = function (models, hooks) {
+    if (hooks === void 0) { hooks = {
+        useCallback: react_1.useCallback,
+        useContext: react_1.useContext,
+        useEffect: react_1.useEffect,
+        useState: react_1.useState
+    }; }
     GlobalState = __assign({}, models);
     hooksApi = __assign({}, hooks);
 };

example/pages/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  PureComponent,
-  useCallback,
-  useContext,
-  useEffect,
-  useState
-} from 'react'
+import React, { PureComponent } from 'react'
 import { Provider, connect, registerModel } from 'react-model'
 import { StateType, ActionType } from '../model/home.model'
 import J from './counter' // JS Version
@@ -13,18 +7,10 @@ import H from './hooks'
 import Home from '../model/home.model'
 import Shared from '../model/shared.model'
 
-registerModel(
-  {
-    Home,
-    Shared
-  },
-  {
-    useState,
-    useCallback,
-    useEffect,
-    useContext
-  }
-)
+registerModel({
+  Home,
+  Shared
+})
 
 export default class App extends PureComponent {
   render() {

src/index.tsx

@@ -1,6 +1,12 @@
 /// <reference path="./index.d.ts" />
 import * as React from 'react'
-import { PureComponent } from 'react'
+import {
+  PureComponent,
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from 'react'
 import { GlobalContext, Consumer } from './helper'
 
 let GlobalState: any = {}
@@ -14,7 +20,15 @@ let Setter = {
 // will throw Error Hooks can only be called inside the body of a function component
 let hooksApi: any = {}
 
-const registerModel = (models: any, hooks: any) => {
+const registerModel = (
+  models: any,
+  hooks: any = {
+    useCallback,
+    useContext,
+    useEffect,
+    useState
+  }
+) => {
   GlobalState = {
     ...models
   }