diff --git a/.npmignore b/.npmignore index 5d1dbcf..9d1c971 100644 --- a/.npmignore +++ b/.npmignore @@ -29,4 +29,5 @@ coverage/ .rts2_cache_umd/ # Github -.github/ \ No newline at end of file +.github/ +.git/ \ No newline at end of file diff --git a/README.md b/README.md index 736de71..aaad357 100644 --- a/README.md +++ b/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) diff --git a/__test__/Model/mixed.spec.ts b/__test__/Model/mixed.spec.ts new file mode 100644 index 0000000..7eccc03 --- /dev/null +++ b/__test__/Model/mixed.spec.ts @@ -0,0 +1,30 @@ +/// +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) + }) +}) diff --git a/__test__/Model/single.spec.ts b/__test__/Model/single.spec.ts new file mode 100644 index 0000000..1572325 --- /dev/null +++ b/__test__/Model/single.spec.ts @@ -0,0 +1,29 @@ +/// +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) + }) +}) diff --git a/__test__/class/class.spec.tsx b/__test__/class/class.spec.tsx index 0c2cd7c..86b5d7f 100644 --- a/__test__/class/class.spec.tsx +++ b/__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( - - + ) + } + } +) + +describe('class component', () => { + test('communicator', async () => { + let state: any + const { useStore } = Model({ Counter }) + testHook(() => { + ;[state] = useStore('Counter') + }) + const { container } = render( + +