feat(v3): NextModelType => ModelType

Author: ArrayZoneYour

README.md

@@ -27,7 +27,9 @@ const 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
-      return state => state.items.push(todo)
+      return state => {
+        state.items.push(todo)
+      }
     }
   }
 }
@@ -56,6 +58,8 @@ const TodoList = () => {
 
 [Next.js + react-model work around](https://github.com/byte-fe/react-model-experiment)
 
+[v2 docs](https://github.com/byte-fe/react-model/blob/v2/README.md)
+
 install package
 
 ```shell
@@ -83,85 +87,15 @@ npm install react-model
   - [How can I add custom middleware](#how-can-i-add-custom-middleware)
     - [How can I make persist models](#how-can-i-make-persist-models)
   - [How can I deal with local state](#how-can-i-deal-with-local-state)
-  - [actions throw error from immer.module.js](#actions-throw-error-from-immer.module.js)
-  - [How can I customize each model's middlewares?](#how-can-i-customize-each-model's-middlewares)
+  - [actions throw error from immer.module.js](#actions-throw-error-from-immermodulejs)
+  - [How can I customize each model's middlewares?](#how-can-i-customize-each-models-middlewares)
 
 ## Core Concept
 
 ### 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,
-  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: ModelType<StateType, ActionsParamType> = {
-  actions: {
-    increment: async (state, _, params) => {
-      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
-
-// 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,

__test__/index.ts

@@ -5,25 +5,25 @@ import { timeout } from '../src/helper'
 import { actionMiddlewares } from '../src/middlewares'
 
 export const ActionsTester: ModelType<ActionTesterState, ActionTesterParams> = {
-  state: {
-    response: {
-      data: {}
-    },
-    data: {}
-  },
   actions: {
     get: async () => {
       const response = await timeout(9, { code: 0, data: { counter: 1000 } })
       return { response }
     },
+    getData: async (_, { actions }) => {
+      await actions.get()
+      actions.parse()
+    },
     parse: () => {
       return state => {
         state.data = state.response.data
       }
-    },
-    getData: async (_, actions) => {
-      await actions.get()
-      actions.parse()
+    }
+  },
+  state: {
+    data: {},
+    response: {
+      data: {}
     }
   }
 }
@@ -32,107 +32,107 @@ export const Counter: ModelType<
   CounterState,
   CounterActionParams & ExtraActionParams
 > = {
-  state: { count: 0 },
   actions: {
-    increment: (_, __, params) => {
-      return state => {
-        state.count += params
-      }
-    },
-    add: (state, __, params) => {
+    add: (params, { state }) => {
       return {
         count: state.count + params
       }
+    },
+    increment: params => {
+      return state => {
+        state.count += params
+      }
     }
-  }
+  },
+  state: { count: 0 }
 }
 
 // v3.0
-export const NextCounter: NextModelType<
+export const NextCounter: ModelType<
   CounterState,
   CounterActionParams & ExtraActionParams
 > = {
-  state: { count: 0 },
   actions: {
-    increment: params => {
-      return state => {
-        state.count += params
-      }
-    },
     add: (params, { state }) => {
       return {
         count: state.count + params
       }
+    },
+    increment: params => {
+      return state => {
+        state.count += params
+      }
     }
-  }
+  },
+  state: { count: 0 }
 }
 
 export const Theme: ModelType<ThemeState, ThemeActionParams> = {
-  state: {
-    theme: 'dark'
-  },
   actions: {
-    changeTheme: state => ({
+    changeTheme: (_, { state }) => ({
       theme: state.theme === 'dark' ? 'light' : 'dark'
     })
+  },
+  state: {
+    theme: 'dark'
   }
 }
 
 export const AsyncCounter: ModelType<CounterState, CounterActionParams> = {
-  state: { count: 0 },
-  asyncState: async (context: { count?: number }) => ({
-    count: context ? context.count || 1 : 1
-  }),
   actions: {
-    increment: (_, __, params) => {
+    increment: params => {
       return state => {
         state.count += params
       }
     }
-  }
+  },
+  asyncState: async (context: { count?: number }) => ({
+    count: context ? context.count || 1 : 1
+  }),
+  state: { count: 0 }
 }
 
 export const AsyncNull: ModelType<CounterState, CounterActionParams> = {
-  state: { count: 0 },
   actions: {
-    increment: (_, __, params) => {
+    increment: params => {
       return state => {
         state.count += params
       }
     }
-  }
+  },
+  state: { count: 0 }
 }
 
 export const TimeoutCounter: ModelType<CounterState, CounterActionParams> = {
-  state: { count: 0 },
-  asyncState: async () => ({
-    count: 1
-  }),
   actions: {
-    increment: async (_, __, params) => {
+    increment: async (params, { state: _ }) => {
       await timeout(4000, {})
       return (state: typeof _) => {
         state.count += params
       }
     }
-  }
+  },
+  asyncState: async () => ({
+    count: 1
+  }),
+  state: { count: 0 }
 }
 
 export const ErrorCounter: ModelType<CounterState, CounterActionParams> = {
-  state: { count: 0 },
   actions: {
     increment: async () => {
       throw 'error'
     }
-  }
+  },
+  state: { count: 0 }
 }
 
 const delayMiddleware: Middleware = async (context, restMiddlewares) => {
   await timeout(2000, {})
   context.next(restMiddlewares)
 }
 
-const nextCounterModel: NextModelType<CounterState, NextCounterActionParams> = {
+const nextCounterModel: ModelType<CounterState, NextCounterActionParams> = {
   actions: {
     add: num => {
       return state => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-model",
-  "version": "2.7.1",
+  "version": "3.0.0-alpha.1",
   "description": "The State management library for React",
   "main": "./dist/react-model.js",
   "umd:main": "./dist/react-model.umd.js",