refactor(model): refactor actions

(state, actions, params) => (params, { state, actions })

re #85, re #83

Author: ArrayZoneYour

.npmignore

@@ -29,4 +29,5 @@ coverage/
 .rts2_cache_umd/
 
 # Github
-.github/
+.github/
+.git/

README.md

@@ -81,6 +81,7 @@ npm install react-model
 - [FAQ](#faq)
   - [How can I disable the console debugger?](#how-can-i-disable-the-console-debugger)
   - [How can I add custom middleware](#how-can-i-add-custom-middleware)
+    - [How can I make persist models](#how-can-i-make-persist-models)
 
 ## Core Concept
 
@@ -655,3 +656,21 @@ export default Model(stores)
 ```
 
 [⇧ back to top](#table-of-contents)
+
+#### How can I make persist models
+
+```typescript
+import { actionMiddlewares, Model } from 'react-model'
+import Example from 'models/example'
+
+const persistMiddleware: Middleware = async (context, restMiddlewares) => {
+  localStorage.setItem('__REACT_MODEL__', JSON.stringify(context.Global.State))
+  await context.next(restMiddlewares)
+}
+
+actionMiddlewares.push(persistMiddleware)
+
+Model({ Example }, JSON.parse(localStorage.getItem('__REACT_MODEL__')))
+```
+
+[⇧ back to top](#table-of-contents)

__test__/Model/mixed.spec.ts

@@ -1,14 +1,14 @@
 /// <reference path="../index.d.ts" />
 import { testHook } from 'react-hooks-testing-library'
-import { Counter } from '..'
+import { NextCounter } from '..'
 import { Model } from '../../src'
 
 describe('useStore', () => {
   test('create by single model definition', async () => {
     let state: any
     let actions: any
     let count = 0
-    const Home = Model(Counter)
+    const Home = Model(NextCounter)
     const { useStore, subscribe, unsubscribe } = Model({ Home })
     testHook(() => {
       ;[state, actions] = useStore('Home')

__test__/Model/single.spec.ts

@@ -1,14 +1,14 @@
 /// <reference path="../index.d.ts" />
 import { testHook } from 'react-hooks-testing-library'
-import { Counter } from '..'
+import { NextCounter } from '..'
 import { Model } from '../../src'
 
 describe('useStore', () => {
   test('create by single model definition', async () => {
     let state: any
     let actions: any
     let count = 0
-    const { useStore, subscribe, unsubscribe } = Model(Counter)
+    const { useStore, subscribe, unsubscribe } = Model(NextCounter)
     testHook(() => {
       ;[state, actions] = useStore()
     })

__test__/index.ts

@@ -45,6 +45,26 @@ export const Counter: ModelType<
   }
 }
 
+// v3.0
+export const NextCounter: NextModelType<
+  CounterState,
+  CounterActionParams & ExtraActionParams
+> = {
+  state: { count: 0 },
+  actions: {
+    increment: params => {
+      return state => {
+        state.count += params
+      }
+    },
+    add: (params, { state }) => {
+      return {
+        count: state.count + params
+      }
+    }
+  }
+}
+
 export const Theme: ModelType<ThemeState, ThemeActionParams> = {
   state: {
     theme: 'dark'

package.json

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

src/index.d.ts

@@ -47,12 +47,32 @@ type Action<S = {}, P = any, ActionKeys = {}> = (
   | void
   | Promise<void>
 
+// v3.0 Action
+type NextAction<S = {}, P = any, ActionKeys = {}> = (
+  params: P,
+  context: {
+    state: S
+    actions: getConsumerNextActionsType<NextActions<S, ActionKeys>>
+  }
+) =>
+  | Partial<S>
+  | Promise<Partial<S>>
+  | ProduceFunc<S>
+  | Promise<ProduceFunc<S>>
+  | void
+  | Promise<void>
+
 type ProduceFunc<S> = (state: S) => void
 
 type Actions<S = {}, ActionKeys = {}> = {
   [P in keyof ActionKeys]: Action<S, ActionKeys[P], ActionKeys>
 }
 
+// v3.0 Actions
+type NextActions<S = {}, ActionKeys = {}> = {
+  [P in keyof ActionKeys]: NextAction<S, ActionKeys[P], ActionKeys>
+}
+
 type Dispatch<A> = (value: A) => void
 type SetStateAction<S> = S | ((prevState: S) => S)
 
@@ -90,14 +110,14 @@ type Middleware<S = {}> = (C: Context<S>, M: Middleware<S>[]) => void
 interface Models<State = any, ActionKeys = any> {
   [name: string]:
     | ModelType<State, ActionKeys>
-    | API<ModelType<State, ActionKeys>>
+    | API<NextModelType<State, ActionKeys>>
 }
 
-interface API<MT extends ModelType = any> {
+interface API<MT extends NextModelType = any> {
   __id: string
   useStore: (
     depActions?: Array<keyof MT['actions']>
-  ) => [Get<MT, 'state'>, getConsumerActionsType<Get<MT, 'actions'>>]
+  ) => [Get<MT, 'state'>, getConsumerNextActionsType<Get<MT, 'actions'>>]
   getState: () => Readonly<Get<MT, 'state'>>
   subscribe: (
     actionName: keyof MT['actions'] | Array<keyof MT['actions']>,
@@ -106,7 +126,7 @@ interface API<MT extends ModelType = any> {
   unsubscribe: (
     actionName: keyof Get<MT, 'actions'> | Array<keyof Get<MT, 'actions'>>
   ) => void
-  actions: Readonly<getConsumerActionsType<Get<MT, 'actions'>>>
+  actions: Readonly<getConsumerNextActionsType<Get<MT, 'actions'>>>
 }
 
 interface APIs<M extends Models> {
@@ -158,6 +178,19 @@ type ModelType<InitStateType = any, ActionKeys = any> = {
   asyncState?: (context?: any) => Promise<Partial<InitStateType>>
 }
 
+// v3.0
+type NextModelType<InitStateType = any, ActionKeys = any> = {
+  actions: {
+    [P in keyof ActionKeys]: NextAction<
+      InitStateType,
+      ActionKeys[P],
+      ActionKeys
+    >
+  }
+  state: InitStateType
+  asyncState?: (context?: any) => Promise<Partial<InitStateType>>
+}
+
 type ArgumentTypes<F extends Function> = F extends (...args: infer A) => any
   ? A
   : never
@@ -174,6 +207,13 @@ type getConsumerActionsType<A extends Actions<any, any>> = {
       ) => ReturnType<A[P]>
 }
 
+// v3.0
+type getConsumerNextActionsType<A extends NextActions<any, any>> = {
+  [P in keyof A]: ArgumentTypes<A[P]>[0] extends undefined
+    ? (params?: ArgumentTypes<A[P]>[0]) => ReturnType<A[P]>
+    : (params: ArgumentTypes<A[P]>[0]) => ReturnType<A[P]>
+}
+
 type Get<Object, K extends keyof Object> = Object[K]
 
 type ModelsProps<M extends Models> = {

src/index.tsx

@@ -10,27 +10,36 @@ import {
 } from './helper'
 import { actionMiddlewares, applyMiddlewares, middlewares } from './middlewares'
 
-const isModelType = (input: any): input is ModelType => {
+const isNextModelType = (input: any): input is NextModelType => {
   return (input as ModelType).state !== undefined
 }
 
 const isAPI = (input: any): input is API => {
   return (input as API).useStore !== undefined
 }
 
-function Model<MT extends ModelType>(models: MT): API<MT>
+function Model<MT extends NextModelType>(models: MT): API<MT>
 function Model<M extends Models>(
   models: M,
   initialState?: Global['State']
 ): APIs<M>
-function Model<M extends Models, MT extends ModelType>(
+function Model<M extends Models, MT extends NextModelType>(
   models: M | MT,
   initialState?: Global['State']
 ) {
-  if (isModelType(models)) {
+  if (isNextModelType(models)) {
     const hash = '__' + Global.uid
     Global.State[hash] = models.state
-    Global.Actions[hash] = models.actions
+    const nextActions: Actions = Object.entries(models.actions).reduce(
+      (o: { [name: string]: Action }, [name, action]) => {
+        o[name] = async (state, actions, params) => {
+          return await action(params, { state, actions })
+        }
+        return o
+      },
+      {}
+    )
+    Global.Actions[hash] = nextActions
     Global.AsyncState[hash] = models.asyncState
     const actions = getActions(hash)
     return {