Merge pull request #92 from byte-fe/feat/Model

feat(model): refactor model initialize method

Author: leecade

.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

@@ -0,0 +1,30 @@
+/// <reference path="../index.d.ts" />
+import { testHook } from 'react-hooks-testing-library'
+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(NextCounter)
+    const { useStore, subscribe, unsubscribe } = Model({ Home })
+    testHook(() => {
+      ;[state, actions] = useStore('Home')
+    })
+    expect(state).toEqual({ count: 0 })
+    await actions.increment(3)
+    expect(state).toEqual({ count: 3 })
+    // test subscribe
+    subscribe('Home', 'increment', () => (count += 1))
+    await actions.increment(4)
+    expect(count).toBe(1)
+    expect(state.count).toBe(7)
+    // test unsubscribe
+    unsubscribe('Home', 'increment')
+    await actions.increment(3)
+    expect(state.count).toBe(10)
+    expect(count).toBe(1)
+  })
+})

__test__/Model/single.spec.ts

@@ -0,0 +1,29 @@
+/// <reference path="../index.d.ts" />
+import { testHook } from 'react-hooks-testing-library'
+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(NextCounter)
+    testHook(() => {
+      ;[state, actions] = useStore()
+    })
+    expect(state).toEqual({ count: 0 })
+    await actions.increment(3)
+    expect(state).toEqual({ count: 3 })
+    // test subscribe
+    subscribe('increment', () => (count += 1))
+    await actions.increment(4)
+    expect(count).toBe(1)
+    expect(state.count).toBe(7)
+    // test unsubscribe
+    unsubscribe('increment')
+    await actions.increment(3)
+    expect(state.count).toBe(10)
+    expect(count).toBe(1)
+  })
+})

__test__/class/class.spec.tsx

@@ -4,7 +4,6 @@ import * as React from 'react'
 import { Model, Provider, connect } from '../../src'
 import { Counter } from '../index'
 import { render, fireEvent } from 'react-testing-library'
-import { testHook } from 'react-hooks-testing-library'
 import { timeout } from '../../src/helper'
 
 const Button = connect(
@@ -51,22 +50,4 @@ describe('class component', () => {
     await timeout(100, {}) // Wait Consumer rerender
     expect(button!.textContent).toBe('3')
   })
-  test('communicator', async () => {
-    let state: any
-    const { useStore } = Model({ Counter })
-    testHook(() => {
-      ;[state] = useStore('Counter')
-    })
-    const { container } = render(
-      <Provider>
-        <Button />
-      </Provider>
-    )
-    const button: any = container.firstChild
-    expect(button!.textContent).toBe('0')
-    fireEvent.click(button)
-    await timeout(100, {}) // Wait Consumer rerender
-    expect(button!.textContent).toBe('3')
-    expect(state.count).toBe(3)
-  })
 })

__test__/class/communicator.spec.tsx

@@ -0,0 +1,49 @@
+/// <reference path="../index.d.ts" />
+import 'react-testing-library/cleanup-after-each'
+import * as React from 'react'
+import { Model, Provider, connect } from '../../src'
+import { Counter } from '../index'
+import { render, fireEvent } from 'react-testing-library'
+import { testHook } from 'react-hooks-testing-library'
+import { timeout } from '../../src/helper'
+
+const Button = connect(
+  'Counter',
+  (props: any) => props
+)(
+  class extends React.PureComponent<any> {
+    render() {
+      const { state, actions } = this.props
+      return (
+        <button
+          onClick={() => {
+            actions.increment(3).catch((e: any) => console.error(e))
+          }}
+        >
+          {state.count}
+        </button>
+      )
+    }
+  }
+)
+
+describe('class component', () => {
+  test('communicator', async () => {
+    let state: any
+    const { useStore } = Model({ Counter })
+    testHook(() => {
+      ;[state] = useStore('Counter')
+    })
+    const { container } = render(
+      <Provider>
+        <Button />
+      </Provider>
+    )
+    const button: any = container.firstChild
+    expect(button!.textContent).toBe('0')
+    fireEvent.click(button)
+    await timeout(100, {}) // Wait Consumer rerender
+    expect(button!.textContent).toBe('3')
+    expect(state.count).toBe(3)
+  })
+})

__test__/getActions.spec.ts

@@ -1,7 +1,7 @@
 /// <reference path="./index.d.ts" />
 import { testHook } from 'react-hooks-testing-library'
+import { Counter } from '.'
 import { Model } from '../src'
-import { Counter, AsyncCounter } from '.'
 
 describe('useStore', () => {
   test('return default initial values', () => {
@@ -25,22 +25,4 @@ describe('useStore', () => {
     await actions.increment(4)
     expect(state.count).toBe(7)
   })
-  test('consumer actions return Partial<State>', async () => {
-    let state: any
-    let actions: any
-    const { useStore, getActions } = Model({ Counter })
-    testHook(() => {
-      ;[state] = useStore('Counter')
-      actions = getActions('Counter')
-    })
-    await actions.add(3)
-    expect(state).toEqual({ count: 3 })
-  })
-  test('use initialModels', async () => {
-    const { getInitialState } = Model({ AsyncCounter })
-    const initialModels = await getInitialState()
-    const { getState } = Model({ AsyncCounter }, initialModels)
-    const state = getState('AsyncCounter')
-    expect(state.count).toBe(1)
-  })
 })

__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'

__test__/useStore.spec.ts

@@ -0,0 +1,17 @@
+/// <reference path="../index.d.ts" />
+import { testHook } from 'react-hooks-testing-library'
+import { Counter } from '..'
+import { Model } from '../../src'
+
+describe('useStore', () => {
+  test('consumer actions return Partial<State>', async () => {
+    let state: any
+    let actions: any
+    const { useStore } = Model({ Counter })
+    testHook(() => {
+      ;[state, actions] = useStore('Counter')
+    })
+    await actions.add(3)
+    expect(state).toEqual({ count: 3 })
+  })
+})