Merge branch 'master' into greenkeeper/immer-3.0.0

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,84 +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)
+  - [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,
@@ -850,4 +785,36 @@ actions: {
 }
 ```
 
-[⇧ back to top](#table-of-contents)
+[⇧ back to top](#table-of-contents)
+
+### How can I customize each model's middlewares?
+
+If you are using NextModel, you can customize each model's middlewares.
+
+```typescript
+import { actionMiddlewares, Model } from 'react-model'
+import { delayMiddleware } from './middlewares'
+
+const nextCounterModel: NextModelType<CounterState, NextCounterActionParams> = {
+  actions: {
+    add: num => {
+      return state => {
+        state.count += num
+      }
+    },
+    increment: async (num, { actions }) => {
+      actions.add(num)
+      await timeout(300, {})
+    }
+  },
+  // You can define the custom middlewares here
+  middlewares: [delayMiddleware, ...actionMiddlewares],
+  state: {
+    count: 0
+  }
+}
+
+export default Model(nextCounterModel)
+```
+
+[⇧ back to top](#table-of-contents)

__test__/index.d.ts

@@ -15,6 +15,11 @@ type CounterActionParams = {
   increment: number
 }
 
+type NextCounterActionParams = {
+  increment: number
+  add: number
+}
+
 type ExtraActionParams = {
   add: number
 }

__test__/index.ts

@@ -1,27 +1,29 @@
 /// <reference path="./index.d.ts" />
 /// <reference path="../src/index.d.ts" />
+import { Model } from '../src'
 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: {}
     }
   }
 }
@@ -30,97 +32,122 @@ 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: ModelType<CounterState, NextCounterActionParams> = {
+  actions: {
+    add: num => {
+      return state => {
+        state.count += num
+      }
+    },
+    increment: async (num, { actions }) => {
+      actions.add(num)
+      await timeout(300, {})
+    }
+  },
+  middlewares: [delayMiddleware, ...actionMiddlewares],
+  state: {
+    count: 0
   }
 }
+
+export const NextCounterModel = Model(nextCounterModel)

__test__/middlewares/model.spec.ts

@@ -0,0 +1,22 @@
+/// <reference path="../index.d.ts" />
+import 'react-testing-library/cleanup-after-each'
+process.env.NODE_ENV = 'production'
+import { testHook } from 'react-hooks-testing-library'
+import { NextCounterModel } from '..'
+import { Model } from '../../src'
+
+describe('NextModel', () => {
+  test("allows you to customize model's middleware", async () => {
+    let actions: any
+    let state: any
+    const { useStore, getActions } = Model({ NextCounterModel })
+    const beginTime = Date.now()
+    testHook(() => {
+      ;[state, actions] = useStore('NextCounterModel')
+    })
+    await actions.increment(2)
+    await getActions('NextCounterModel').increment(1)
+    expect(Date.now() - beginTime > 300)
+    expect(state.count).toBe(3)
+  })
+})