perf(useStore): create/clean hash only when component mount/unmount

re #46

Author: ArrayZoneYour

README.md

@@ -23,7 +23,7 @@ const Todo = {
     items: ['Install react-model', 'Read github docs', 'Build App']
   },
   actions: {
-    add: (s, actions, todo) => {
+    add: todo => {
       // s is the readonly version of state
       // you can also return partial state here but don't need to keep immutable manually
       // state is the mutable state
@@ -33,14 +33,14 @@ const Todo = {
 }
 
 // Model Register
-const { useStore } = Model({ Todo })
+const { useStore } = Model(Todo)
 
 const App = () => {
   return <TodoList />
 }
 
 const TodoList = () => {
-  const [state, actions] = useStore('Todo')
+  const [state, actions] = useStore()
   return <div>
     <Addon handler={actions.add} />
     {state.items.map((item, index) => (<Todo key={index} item={item} />))}
@@ -89,6 +89,10 @@ npm install react-model
 
 Every model have their own state and actions.
 
+<details>
+<summary><del>old model</del> (will be deprecated in v3.0)</summary>
+<p>
+
 ```typescript
 const initialState = {
   counter: 0,
@@ -111,7 +115,7 @@ interface ActionsParamType = {
   get: undefined
 } // You only need to tag the type of params here !
 
-const Model: ModelType<StateType, ActionsParamType> = {
+const model: ModelType<StateType, ActionsParamType> = {
   actions: {
     increment: async (state, _, params) => {
       return {
@@ -144,7 +148,73 @@ const Model: ModelType<StateType, ActionsParamType> = {
   state: initialState
 }
 
-export default Model
+export default model
+
+// You can use these types when use Class Components.
+// type ConsumerActionsType = getConsumerActionsType<typeof Model.actions>
+// type ConsumerType = { actions: ConsumerActionsType; state: StateType }
+// type ActionType = ConsumerActionsType
+// export { ConsumerType, StateType, ActionType }
+```
+</p>
+</details>
+
+```typescript
+const initialState = {
+  counter: 0,
+  light: false,
+  response: {}
+}
+
+interface StateType = {
+  counter: number
+  light: boolean
+  response: {
+    code?: number
+    message?: string
+  }
+}
+
+interface ActionsParamType = {
+  increment: number
+  openLight: undefined
+  get: undefined
+} // You only need to tag the type of params here !
+
+const model: NextModelType<StateType, ActionsParamType> = {
+  actions: {
+    increment: async (payload, { state }) => {
+      return {
+        counter: state.counter + (params || 1)
+      }
+    },
+    openLight: async (_, { state, actions }) => {
+      await actions.increment(1) // You can use other actions within the model
+      await actions.get() // support async functions (block actions)
+      actions.get()
+      await actions.increment(1) // + 1
+      await actions.increment(1) // + 2
+      await actions.increment(1) // + 3 as expected !
+      return { light: !state.light }
+    },
+    get: async () => {
+      await new Promise((resolve, reject) =>
+        setTimeout(() => {
+          resolve()
+        }, 3000)
+      )
+      return {
+        response: {
+          code: 200,
+          message: `${new Date().toLocaleString()} open light success`
+        }
+      }
+    }
+  },
+  state: initialState
+}
+
+export default Model(model)
 
 // You can use these types when use Class Components.
 // type ConsumerActionsType = getConsumerActionsType<typeof Model.actions>
@@ -157,7 +227,7 @@ export default Model
 
 ### Model Register
 
-react-model keep the state and actions in a separate store. So you need to register them before using.
+react-model keep the state and actions in the separate private store. So you need to register them if you want to use them as the public models.
 
 `model/index.ts`
 
@@ -166,9 +236,9 @@ import { Model } from 'react-model'
 import Home from '../model/home'
 import Shared from '../model/shared'
 
-const stores = { Home, Shared }
+const models = { Home, Shared }
 
-export const { getInitialState, useStore, getState, getActions, subscribe, unsubscribe } = Model(stores)
+export const { getInitialState, useStore, getState, actions, subscribe, unsubscribe } = Model(models)
 ```
 
 [⇧ back to top](#table-of-contents)
@@ -180,7 +250,7 @@ The actions return from useStore can invoke the dom changes.
 
 The execution of actions returned by useStore will invoke the rerender of current component first.
 
-It's the only difference between the actions returned by useStore and getActions now.
+It's the only difference between the actions returned by useStore and actions now.
 
 ```tsx
 import React from 'react'
@@ -251,9 +321,9 @@ const BasicHook = () => {
 
 ### actions
 
-You can call other models' actions with getActions api
+You can call other models' actions with actions api
 
-getActions can be used in both class components and functional components.
+actions can be used in both class components and functional components.
 
 ```js
 import { actions } from './index'
@@ -271,6 +341,8 @@ const model = {
 export default model
 ```
 
+[⇧ back to top](#table-of-contents)
+
 ### subscribe
 
 subscribe(storeName, actions, callback) run the callback when the specific actions executed.
@@ -307,7 +379,7 @@ TypeScript Example
 // StateType and ActionsParamType definition
 // ...
 
-const Model: ModelType<StateType, ActionsParamType> = {
+const model: NextModelType<StateType, ActionsParamType> = {
   actions: {
     increment: async (s, _, params) => {
       // issue: https://github.com/Microsoft/TypeScript/issues/29196
@@ -321,6 +393,8 @@ const Model: ModelType<StateType, ActionsParamType> = {
     }
   }
 }
+
+export default Model(model)
 ```
 
 JavaScript Example
@@ -350,9 +424,9 @@ const initialState = {
   counter: 0
 }
 
-const Model: ModelType<StateType, ActionsParamType> = {
+const model: NextModelType<StateType, ActionsParamType> = {
   actions: {
-    increment: (state, _, params) => {
+    increment: (params, { state }) => {
       return {
         counter: state.counter + (params || 1)
       }
@@ -365,6 +439,8 @@ const Model: ModelType<StateType, ActionsParamType> = {
   },
   state: initialState
 }
+
+export default Model(model)
 ```
 
 </p>

src/index.tsx

@@ -28,6 +28,7 @@ function Model<M extends Models, MT extends NextModelType>(
   initialState?: Global['State']
 ) {
   if (isNextModelType(models)) {
+    Global.uid += 1
     const hash = '__' + Global.uid
     Global.State[hash] = models.state
     const nextActions: Actions = Object.entries(models.actions).reduce(
@@ -163,17 +164,19 @@ const getActions = (
 
 const useStore = (modelName: string, depActions?: string[]) => {
   const setState = useState(Global.State[modelName])[1]
-  Global.uid += 1
-  const hash = '' + Global.uid
-  if (!Global.Setter.functionSetter[modelName]) {
-    Global.Setter.functionSetter[modelName] = {}
-  }
-  Global.Setter.functionSetter[modelName][hash] = { setState, depActions }
+
   useEffect(() => {
+    Global.uid += 1
+    const hash = '' + Global.uid
+    if (!Global.Setter.functionSetter[modelName]) {
+      Global.Setter.functionSetter[modelName] = {}
+    }
+    Global.Setter.functionSetter[modelName][hash] = { setState, depActions }
     return function cleanup() {
       delete Global.Setter.functionSetter[modelName][hash]
     }
-  })
+  }, [])
+
   const updaters = getActions(modelName, { setState, type: 'function' })
   return [getState(modelName), updaters]
 }