feat(usemodel): make useModel api the same as useState

Author: ArrayZoneYour

__test__/lane/lane.spec.ts

@@ -29,6 +29,32 @@ describe('lane model', () => {
     })
   })
 
+  test('pass function to useModel ', async () => {
+    const { useStore } = createStore(() => {
+      const [count, setCount] = useModel(() => 1)
+      return { count, setCount }
+    })
+    let renderTimes = 0
+    const { result } = renderHook(() => {
+      const { count, setCount } = useStore()
+      renderTimes += 1
+      return { renderTimes, count, setCount }
+    })
+    await act(async () => {
+      expect(renderTimes).toEqual(1)
+      expect(result.current.count).toBe(1)
+    })
+
+    await act(async () => {
+      await result.current.setCount((count) => count + 1)
+    })
+
+    await act(() => {
+      expect(renderTimes).toEqual(2)
+      expect(result.current.count).toBe(2)
+    })
+  })
+
   test('false value can be accepted', async () => {
     const { useStore } = createStore(() => {
       const [count, setCount] = useModel(true)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-model",
-  "version": "4.1.0-alpha.1",
+  "version": "4.1.0-alpha.2",
   "description": "The State management library for React",
   "main": "./dist/react-model.js",
   "module": "./dist/react-model.esm.js",

src/index.tsx

@@ -23,15 +23,22 @@ const isAPI = (input: any): input is API => {
 
 // useModel rules:
 // DON'T USE useModel OUTSIDE createStore func
-function useModel<S>(state: S): [S, (state: S) => void] {
+function useModel<S>(
+  state: S | (() => S)
+): [S, (state: S | ((state: S) => S)) => void] {
   const storeId = Global.currentStoreId
   const index = Global.mutableState[storeId].count
   Global.mutableState[storeId].count += 1
   if (!Global.mutableState[storeId].hasOwnProperty(index)) {
-    Global.mutableState[storeId][index] = state
+    if (typeof state === 'function') {
+      // @ts-ignore
+      Global.mutableState[storeId][index] = state()
+    } else {
+      Global.mutableState[storeId][index] = state
+    }
   }
 
-  const setter = async (state: S) => {
+  const setter = async (state: S | ((prevState: S) => S)) => {
     const context: InnerContext = {
       Global,
       action: () => {
@@ -46,7 +53,16 @@ function useModel<S>(state: S): [S, (state: S) => void] {
       params: undefined,
       type: 'useModel'
     }
-    Global.mutableState[storeId][index] = state
+
+    if (typeof state === 'function') {
+      // @ts-ignore
+      Global.mutableState[storeId][index] = state(
+        Global.mutableState[storeId][index]
+      )
+    } else {
+      Global.mutableState[storeId][index] = state
+    }
+    // pass update event to other components subscribe the same store
     return await applyMiddlewares(actionMiddlewares, context)
   }
   return [Global.mutableState[storeId][index], setter]
@@ -124,11 +140,9 @@ function Model<M extends Models, MT extends ModelType, E>(
   } else {
     if (models.actions) {
       console.error('invalid model(s) schema: ', models)
-      const errorFn =
-        (fakeReturnVal?: unknown) =>
-        (..._: unknown[]) => {
-          return fakeReturnVal
-        }
+      const errorFn = (fakeReturnVal?: unknown) => (..._: unknown[]) => {
+        return fakeReturnVal
+      }
       // Fallback Functions
       return {
         __ERROR__: true,
@@ -325,41 +339,39 @@ class Provider extends PureComponent<{}, Global['State']> {
   }
 }
 
-const connect =
-  (
-    modelName: string,
-    mapState?: Function | undefined,
-    mapActions?: Function | undefined
-  ) =>
-  (Component: typeof React.Component | typeof PureComponent) =>
-    class P extends PureComponent<any> {
-      render() {
-        const { state: prevState = {}, actions: prevActions = {} } = this.props
-        return (
-          <Consumer>
-            {(models) => {
-              const { [`${modelName}`]: state } = models as any
-              const actions = Global.Actions[modelName]
-              return (
-                <Component
-                  {...this.props}
-                  state={{
-                    ...prevState,
-                    ...(mapState ? mapState(state) : state)
-                  }}
-                  actions={{
-                    ...prevActions,
-                    ...(mapActions
-                      ? mapActions(consumerActions(actions, { modelName }))
-                      : consumerActions(actions, { modelName }))
-                  }}
-                />
-              )
-            }}
-          </Consumer>
-        )
-      }
+const connect = (
+  modelName: string,
+  mapState?: Function | undefined,
+  mapActions?: Function | undefined
+) => (Component: typeof React.Component | typeof PureComponent) =>
+  class P extends PureComponent<any> {
+    render() {
+      const { state: prevState = {}, actions: prevActions = {} } = this.props
+      return (
+        <Consumer>
+          {(models) => {
+            const { [`${modelName}`]: state } = models as any
+            const actions = Global.Actions[modelName]
+            return (
+              <Component
+                {...this.props}
+                state={{
+                  ...prevState,
+                  ...(mapState ? mapState(state) : state)
+                }}
+                actions={{
+                  ...prevActions,
+                  ...(mapActions
+                    ? mapActions(consumerActions(actions, { modelName }))
+                    : consumerActions(actions, { modelName }))
+                }}
+              />
+            )
+          }}
+        </Consumer>
+      )
     }
+  }
 
 export {
   actionMiddlewares,