212 | Home model value: {JSON.stringify(state)}
213 | Shared model value: {JSON.stringify(sharedState)}
214 |
215 |
218 |
219 |
220 |
221 | )
222 | }
223 | ```
224 |
225 | optional solution on huge dataset (example: TodoList(10000+ Todos)):
226 |
227 | 1. use useStore on the subComponents which need it.
228 | 2. use useStore selector. (version >= v4.0.0-rc.0)
229 |
230 | [advance example with 1000 todo items](https://codesandbox.io/s/react-model-v4-todomvc-oxyij)
231 |
232 | [⇧ back to top](#table-of-contents)
233 |
234 | ### getState
235 |
236 | Key Point: [State variable not updating in useEffect callback](https://github.com/facebook/react/issues/14066)
237 |
238 | To solve it, we provide a way to get the current state of model: getState
239 |
240 | Note: the getState method cannot invoke the dom changes automatically by itself.
241 |
242 | > Hint: The state returned should only be used as readonly
243 |
244 | ```jsx
245 | import { useStore, getState } from '../model/index'
246 |
247 | const BasicHook = () => {
248 | const [state, actions] = useStore('Counter')
249 | useEffect(() => {
250 | console.log('some mounted actions from BasicHooks')
251 | return () =>
252 | console.log(
253 | `Basic Hooks unmounted, current Counter state: ${JSON.stringify(
254 | getState('Counter')
255 | )}`
256 | )
257 | }, [])
258 | return (
259 | <>
260 | = {
329 | actions: {
330 | increment: async (params, { state: s }) => {
331 | // return (state: typeof s) => { // TypeScript < 3.9
332 | return state => {
333 | state.counter += params || 1
334 | }
335 | },
336 | decrease: params => s => {
337 | s.counter += params || 1
338 | }
339 | }
340 | }
341 |
342 | export default model
343 | ```
344 |
345 | JavaScript Example
346 |
347 | ```js
348 | const Model = {
349 | actions: {
350 | increment: async (params) => {
351 | return state => {
352 | state.counter += params || 1
353 | }
354 | }
355 | }
356 | }
357 | ```
358 |
359 | [⇧ back to top](#table-of-contents)
360 |
361 | ### SSR with Next.js
362 |
363 |
364 | Store: shared.ts
365 |
366 |
367 | ```ts
368 | const initialState = {
369 | counter: 0
370 | }
371 |
372 | const model: ModelType = {
373 | actions: {
374 | increment: (params, { state }) => {
375 | return {
376 | counter: state.counter + (params || 1)
377 | }
378 | }
379 | },
380 | // Provide for SSR
381 | asyncState: async context => {
382 | await waitFor(4000)
383 | return { counter: 500 }
384 | },
385 | state: initialState
386 | }
387 |
388 | export default model
389 | ```
390 |
391 |
392 |
393 |
394 |
395 | Global Config: _app.tsx
396 |
397 |
398 |
399 | ```tsx
400 | import { models, getInitialState, Models } from '../model/index'
401 |
402 | let persistModel: any
403 |
404 | interface ModelsProps {
405 | initialModels: Models
406 | persistModel: Models
407 | }
408 |
409 | const MyApp = (props: ModelsProps) => {
410 | if ((process as any).browser) {
411 | // First come in: initialModels
412 | // After that: persistModel
413 | persistModel = props.persistModel || Model(models, props.initialModels)
414 | }
415 | const { Component, pageProps, router } = props
416 | return (
417 |
418 |
419 |
420 | )
421 | }
422 |
423 | MyApp.getInitialProps = async (context: NextAppContext) => {
424 | if (!(process as any).browser) {
425 | const initialModels = context.Component.getInitialProps
426 | ? await context.Component.getInitialProps(context.ctx)
427 | await getInitialState(undefined, { isServer: true }) // get all model initialState
428 | // : await getInitialState({ modelName: 'Home' }, { isServer: true }) // get Home initialState only
429 | // : await getInitialState({ modelName: ['Home', 'Todo'] }, { isServer: true }) // get multi initialState
430 | // : await getInitialState({ data }, { isServer: true }) // You can also pass some public data as asyncData params.
431 | return { initialModels }
432 | } else {
433 | return { persistModel }
434 | }
435 | }
436 | ```
437 |
438 |
439 |
440 |
441 | Page: hooks/index.tsx
442 |
443 |
444 | ```tsx
445 | import { useStore, getState } from '../index'
446 | export default () => {
447 | const [state, actions] = useStore('Home')
448 | const [sharedState, sharedActions] = useStore('Shared')
449 |
450 | return (
451 |
452 | Home model value: {JSON.stringify(state)}
453 | Shared model value: {JSON.stringify(sharedState)}
454 |
460 | )
461 | }
462 | ```
463 |
464 |
465 |
466 |
467 | Single Page Config: benchmark.tsx
468 |
469 |
470 | ```tsx
471 | // ...
472 | Benchmark.getInitialProps = async () => {
473 | return await getInitialState({ modelName: 'Todo' }, { isServer: true })
474 | }
475 | ```
476 |
477 |
478 |
479 | [⇧ back to top](#table-of-contents)
480 |
481 | ### Middleware
482 |
483 | We always want to try catch all the actions, add common request params, connect Redux devtools and so on. We Provide the middleware pattern for developer to register their own Middleware to satisfy the specific requirement.
484 |
485 | ```tsx
486 | // Under the hood
487 | const tryCatch: Middleware<{}> = async (context, restMiddlewares) => {
488 | const { next } = context
489 | await next(restMiddlewares).catch((e: any) => console.log(e))
490 | }
491 |
492 | // ...
493 |
494 | let actionMiddlewares = [
495 | tryCatch,
496 | getNewState,
497 | setNewState,
498 | stateUpdater,
499 | communicator,
500 | devToolsListener
501 | ]
502 |
503 | // ...
504 | // How we execute an action
505 | const consumerAction = (action: Action) => async (params: any) => {
506 | const context: Context = {
507 | modelName,
508 | setState,
509 | actionName: action.name,
510 | next: () => {},
511 | newState: null,
512 | params,
513 | consumerActions,
514 | action
515 | }
516 | await applyMiddlewares(actionMiddlewares, context)
517 | }
518 |
519 | // ...
520 |
521 | export { ... , actionMiddlewares}
522 | ```
523 |
524 | ⚙️ You can override the actionMiddlewares and insert your middleware to specific position
525 |
526 | [⇧ back to top](#table-of-contents)
527 |
528 | ### Expand Context
529 |
530 | ```typescript
531 | const ExtCounter: ModelType<
532 | { name: string }, // State Type
533 | { ext: undefined }, // ActionParamsType
534 | { name: string } // ExtContextType
535 | > = {
536 | actions: {
537 | // { state, action } => { state, action, [name] }
538 | ext: (_, { name }) => {
539 | return { name }
540 | }
541 | },
542 | state: { name: '' }
543 | }
544 |
545 | const { useStore } = Model(ExtCounter, { name: 'test' })
546 | // state.name = ''
547 | const [state, actions] = useStore()
548 | // ...
549 | actions.ext()
550 | // state.name => 'test'
551 | ```
552 |
553 | [⇧ back to top](#table-of-contents)
554 |
555 | ## Other Concept required by Class Component
556 |
557 | ### Provider
558 |
559 | The global state standalone can not effect the react class components, we need to provide the state to react root component.
560 |
561 | ```jsx
562 | import { PureComponent } from 'react'
563 | import { Provider } from 'react-model'
564 |
565 | class App extends PureComponent {
566 | render() {
567 | return (
568 |
569 |
570 |
571 | )
572 | }
573 | }
574 | ```
575 |
576 | [⇧ back to top](#table-of-contents)
577 |
578 | ### connect
579 |
580 | We can use the Provider state with connect.
581 |
582 |
583 | Javascript decorator version
584 |
585 |
586 | ```jsx
587 | import React, { PureComponent } from 'react'
588 | import { Provider, connect } from 'react-model'
589 |
590 | const mapProps = ({ light, counter }) => ({
591 | lightStatus: light ? 'open' : 'close',
592 | counter
593 | }) // You can map the props in connect.
594 |
595 | @connect(
596 | 'Home',
597 | mapProps
598 | )
599 | export default class JSCounter extends PureComponent {
600 | render() {
601 | const { state, actions } = this.props
602 | return (
603 | <>
604 |
states - {JSON.stringify(state)}
605 |
606 |
607 |
608 | )
609 | }
610 | }
611 | ```
612 |
613 |
614 |
615 |
616 |
617 | TypeScript Version
618 |
619 |
620 | ```tsx
621 | import React, { PureComponent } from 'react'
622 | import { Provider, connect } from 'react-model'
623 | import { StateType, ActionType } from '../model/home'
624 |
625 | const mapProps = ({ light, counter, response }: StateType) => ({
626 | lightStatus: light ? 'open' : 'close',
627 | counter,
628 | response
629 | })
630 |
631 | type RType = ReturnType
632 |
633 | class TSCounter extends PureComponent<
634 | { state: RType } & { actions: ActionType }
635 | > {
636 | render() {
637 | const { state, actions } = this.props
638 | return (
639 | <>
640 | TS Counter
641 | states - {JSON.stringify(state)}
642 |
643 |
644 |
645 | message: {JSON.stringify(state.response)}
646 |
647 | )
648 | }
649 | }
650 |
651 | export default connect(
652 | 'Home',
653 | mapProps
654 | )(TSCounter)
655 | ```
656 |
657 |
658 |
659 | [⇧ back to top](#table-of-contents)
660 |
661 | ## FAQ
662 |
663 | ### Migrate from 3.1.x to 4.x.x
664 |
665 | 1. remove Model wrapper
666 |
667 | `sub-model.ts`
668 | ```ts
669 | // 3.1.x
670 | export default Model(model)
671 | // 4.x.x
672 | export default model
673 | ```
674 |
675 | `models.ts`
676 | ```ts
677 | import Sub from './sub-model'
678 | export default Model({ Sub })
679 | ```
680 |
681 | 2. use selector to replace depActions
682 |
683 | `Shared.ts`
684 | ```ts
685 | interface State {
686 | counter: number
687 | enable: boolean
688 | }
689 |
690 | interface ActionParams {
691 | add: number
692 | switch: undefined
693 | }
694 |
695 | const model: ModelType = {
696 | state: {
697 | counter: 1
698 | enable: false
699 | },
700 | actions: {
701 | add: (payload) => state => {
702 | state.counter += payload
703 | },
704 | switch: () => state => {
705 | state.enable = !state.enable
706 | }
707 | }
708 | }
709 | ```
710 |
711 | ```ts
712 | const Component = () => {
713 | // 3.1.x, Component rerender when add action is invoked
714 | const [counter] = useStore('Shared', ['add'])
715 | // 4.x.x, Component rerender when counter value diff
716 | const [counter] = useStore('Shared', state => state.counter)
717 | }
718 | ```
719 |
720 | ### How can I disable the console debugger
721 |
722 |
723 | ```typescript
724 | import { middlewares } from 'react-model'
725 | // Find the index of middleware
726 |
727 | // Disable all actions' log
728 | middlewares.config.logger.enable = false
729 | // Disable logs from specific type of actions
730 | middlewares.config.logger.enable = ({ actionName }) => ['increment'].indexOf(actionName) !== -1
731 | ```
732 |
733 | [⇧ back to top](#table-of-contents)
734 |
735 | ### How can I add custom middleware
736 |
737 | ```typescript
738 | import { actionMiddlewares, middlewares, Model } from 'react-model'
739 | import { sendLog } from 'utils/log'
740 | import Home from '../model/home'
741 | import Shared from '../model/shared'
742 |
743 | // custom middleware
744 | const ErrorHandler: Middleware = async (context, restMiddlewares) => {
745 | const { next } = context
746 | await next(restMiddlewares).catch((e: Error) => sendLog(e))
747 | }
748 |
749 | // Find the index of middleware
750 | const getNewStateMiddlewareIndex = actionMiddlewares.indexOf(
751 | middlewares.getNewState
752 | )
753 |
754 | // Replace it
755 | actionMiddlewares.splice(getNewStateMiddlewareIndex, 0, ErrorHandler)
756 |
757 | const stores = { Home, Shared }
758 |
759 | export default Model(stores)
760 | ```
761 |
762 | [⇧ back to top](#table-of-contents)
763 |
764 | #### How can I make persist models
765 |
766 | ```typescript
767 | import { actionMiddlewares, Model } from 'react-model'
768 | import Example from 'models/example'
769 |
770 | // Example, not recommend to use on production directly without consideration
771 | // Write current State to localStorage after action finish
772 | const persistMiddleware: Middleware = async (context, restMiddlewares) => {
773 | localStorage.setItem('__REACT_MODEL__', JSON.stringify(context.Global.State))
774 | await context.next(restMiddlewares)
775 | }
776 |
777 | // Use on all models
778 | actionMiddlewares.push(persistMiddleware)
779 | Model({ Example }, JSON.parse(localStorage.getItem('__REACT_MODEL__')))
780 |
781 | // Use on single model
782 | const model = {
783 | state: JSON.parse(localStorage.getItem('__REACT_MODEL__'))['you model name']
784 | actions: { ... },
785 | middlewares: [...actionMiddlewares, persistMiddleware]
786 | }
787 |
788 |
789 | ```
790 |
791 | [⇧ back to top](#table-of-contents)
792 |
793 | ### How can I deal with local state
794 |
795 | What should I do to make every Counter hold there own model? 🤔
796 |
797 | ```tsx
798 | class App extends Component {
799 | render() {
800 | return (
801 |
802 |
803 |
804 |
805 |
806 | )
807 | }
808 | }
809 | ```
810 |
811 |
812 | Counter model
813 |
814 |
815 | ```ts
816 | interface State {
817 | count: number
818 | }
819 |
820 | interface ActionParams {
821 | increment: number
822 | }
823 |
824 | const model: ModelType = {
825 | state: {
826 | count: 0
827 | },
828 | actions: {
829 | increment: payload => {
830 | // immer.module.js:972 Uncaught (in promise) Error: An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft
831 | // Not allowed
832 | // return state => (state.count += payload)
833 | return state => {
834 | state.count += payload
835 | }
836 | }
837 | }
838 | }
839 |
840 | ```
841 |
842 |
843 |
844 |
845 |
846 | Counter.tsx
847 |
848 |
849 | ```tsx
850 |
851 | const Counter = () => {
852 | const [{ useStore }] = useState(() => Model(model))
853 | const [state, actions] = useStore()
854 | return (
855 |
856 |
{state.count}
857 |
858 |
867 |
868 | [⇧ back to top](#table-of-contents)
869 |
870 | ### actions throw error from immer.module.js
871 |
872 | ```
873 | immer.module.js:972 Uncaught (in promise) Error: An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft
874 | ```
875 |
876 | How to fix:
877 |
878 | ```tsx
879 | actions: {
880 | increment: payload => {
881 | // Not allowed
882 | // return state => (state.count += payload)
883 | return state => {
884 | state.count += payload
885 | }
886 | }
887 | }
888 | ```
889 |
890 | [⇧ back to top](#table-of-contents)
891 |
892 | ### How can I customize each model's middlewares?
893 |
894 | You can customize each model's middlewares.
895 |
896 | ```typescript
897 | import { actionMiddlewares, Model } from 'react-model'
898 | const delayMiddleware: Middleware = async (context, restMiddlewares) => {
899 | await timeout(1000, {})
900 | context.next(restMiddlewares)
901 | }
902 |
903 | const nextCounterModel: ModelType = {
904 | actions: {
905 | add: num => {
906 | return state => {
907 | state.count += num
908 | }
909 | },
910 | increment: async (num, { actions }) => {
911 | actions.add(num)
912 | await timeout(300, {})
913 | }
914 | },
915 | // You can define the custom middlewares here
916 | middlewares: [delayMiddleware, ...actionMiddlewares],
917 | state: {
918 | count: 0
919 | }
920 | }
921 |
922 | export default Model(nextCounterModel)
923 | ```
924 |
925 | [⇧ back to top](#table-of-contents)
926 |
--------------------------------------------------------------------------------
/__test__/Model/error.multi.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | // @ts-ignore
4 | import { ErrorModel as EM } from './errorModel'
5 | import { Model } from '../../src'
6 |
7 | describe('useStore', () => {
8 | test('create by single model error definition', async () => {
9 | let state: any
10 | let actions: any
11 | let count = 0
12 | const ErrorModel = Model(EM)
13 | // @ts-ignore
14 | const { useStore, subscribe, unsubscribe } = Model({ ErrorModel })
15 | renderHook(() => {
16 | ;[state, actions] = useStore('ErrorModel')
17 | })
18 | expect(actions).toEqual({})
19 | expect(actions.increment).toBe(undefined)
20 | // await actions.increment(3)
21 | expect(state).toEqual({})
22 | // test subscribe
23 | // @ts-ignore
24 | subscribe('increment', () => (count += 1))
25 | expect(count).toBe(0)
26 | expect(state.count).toBe(undefined)
27 | // test unsubscribe
28 | // @ts-ignore
29 | unsubscribe('increment')
30 | expect(actions).toEqual({})
31 | expect(state.count).toBe(undefined)
32 | expect(count).toBe(0)
33 | })
34 | })
35 |
--------------------------------------------------------------------------------
/__test__/Model/error.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | // @ts-ignore
4 | import { ErrorModel } from './errorModel'
5 | import { Model } from '../../src'
6 |
7 | describe('useStore', () => {
8 | test('create by single model definition', async () => {
9 | let state: any
10 | let actions: any
11 | let count = 0
12 | // @ts-ignore
13 | const { useStore, subscribe, unsubscribe } = Model(ErrorModel)
14 | renderHook(() => {
15 | ;[state, actions] = useStore()
16 | })
17 | expect(state).toEqual({})
18 | expect(actions.increment).toBe(undefined)
19 | // await actions.increment(3)
20 | expect(state).toEqual({})
21 | // test subscribe
22 | subscribe('increment', () => (count += 1))
23 | expect(actions).toEqual({})
24 | expect(count).toBe(0)
25 | expect(state.count).toBe(undefined)
26 | // test unsubscribe
27 | unsubscribe('increment')
28 | expect(actions).toEqual({})
29 | expect(state.count).toBe(undefined)
30 | expect(count).toBe(0)
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/__test__/Model/errorModel.ts:
--------------------------------------------------------------------------------
1 | // Use to simulate a error model.js file
2 | export const ErrorModel: any = {
3 | actions: {
4 | // @ts-ignore
5 | add: (params, { state }) => {
6 | return {
7 | count: state.count + params
8 | }
9 | },
10 | // @ts-ignore
11 | addCaller: (_, { actions }) => {
12 | actions.add(5)
13 | },
14 | // @ts-ignore
15 | increment: params => {
16 | // @ts-ignore
17 | return state => {
18 | state.count += params
19 | }
20 | },
21 | state: { count: 0 }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/__test__/Model/extContext.multi.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { ExtCounter } from '..'
4 | import { Model } from '../../src'
5 |
6 | describe('useStore', () => {
7 | test('models with extContext', async () => {
8 | // Multiple Model with Context
9 | let testState: any
10 | let testActions: any
11 | let extState: any
12 | let extActions: any
13 | // @ts-ignore
14 | const Test = Model(ExtCounter, { name: 'test' })
15 | // @ts-ignore
16 | const Ext = Model(ExtCounter, { name: 'ext' })
17 | const { useStore } = Model({ Test, Ext })
18 | renderHook(() => {
19 | ;[testState, testActions] = useStore('Test')
20 | ;[extState, extActions] = useStore('Ext')
21 | })
22 | expect(testState).toEqual({ name: '' })
23 | await testActions.ext()
24 | expect(testState).toEqual({ name: 'test' })
25 | expect(extState).toEqual({ name: '' })
26 | await extActions.ext()
27 | expect(extState).toEqual({ name: 'ext' })
28 | })
29 | })
30 |
--------------------------------------------------------------------------------
/__test__/Model/extContext.spec.single.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { ExtCounter } from '..'
4 | import { Model } from '../../src'
5 |
6 | describe('useStore', () => {
7 | test('models with extContext', async () => {
8 | // Single Model extContext
9 | let state: any
10 | let actions: any
11 | const { useStore: u } = Model(ExtCounter, { name: 'test' })
12 | renderHook(() => {
13 | ;[state, actions] = u()
14 | })
15 | expect(state).toEqual({ name: '' })
16 | await actions.ext()
17 | expect(state).toEqual({ name: 'test' })
18 | })
19 | })
20 |
--------------------------------------------------------------------------------
/__test__/Model/mixed.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { NextCounter } from '..'
4 | import { Model } from '../../src'
5 |
6 | describe('useStore', () => {
7 | test('create by single model definition', async () => {
8 | let state: any, nextState: any
9 | let actions: any, nextActions: any
10 | let count = 0
11 | let nextCount = 0
12 | const Home = Model(NextCounter)
13 | const { useStore, subscribe, unsubscribe } = Model({ Home, NextCounter })
14 | renderHook(() => {
15 | ;[state, actions] = useStore('Home')
16 | ;[nextState, nextActions] = useStore('NextCounter')
17 | })
18 |
19 | // Home
20 | expect(state).toEqual({ count: 0 })
21 | await actions.increment(3)
22 | expect(state).toEqual({ count: 3 })
23 | // test subscribe
24 | subscribe('Home', 'increment', () => (count += 1))
25 | await actions.increment(4)
26 | expect(count).toBe(1)
27 | expect(state.count).toBe(7)
28 | // test unsubscribe
29 | unsubscribe('Home', 'increment')
30 | await actions.increment(3)
31 | expect(state.count).toBe(10)
32 | expect(count).toBe(1)
33 |
34 | // NextCounter
35 | expect(nextState).toEqual({ count: 0 })
36 | await nextActions.increment(3)
37 | expect(nextState).toEqual({ count: 3 })
38 | // test subscribe
39 | subscribe('NextCounter', 'increment', () => (nextCount += 1))
40 | await nextActions.increment(4)
41 | expect(nextCount).toBe(1)
42 | expect(nextState.count).toBe(7)
43 | // test unsubscribe
44 | unsubscribe('NextCounter', 'increment')
45 | await nextActions.increment(3)
46 | expect(nextState.count).toBe(10)
47 | expect(nextCount).toBe(1)
48 | })
49 | })
50 |
--------------------------------------------------------------------------------
/__test__/Model/single.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { NextCounter } from '..'
4 | import { Model } from '../../src'
5 |
6 | describe('useStore', () => {
7 | test('create by single model definition', async () => {
8 | let state: any
9 | let actions: any
10 | let count = 0
11 | const { useStore, subscribe, unsubscribe, getState } = Model(NextCounter)
12 | renderHook(() => {
13 | ;[state, actions] = useStore()
14 | })
15 | expect(state).toEqual({ count: 0 })
16 | await actions.increment(3)
17 | expect(state).toEqual({ count: 3 })
18 | // test subscribe
19 | subscribe('increment', () => (count += 1))
20 | await actions.increment(4)
21 | expect(count).toBe(1)
22 | expect(state.count).toBe(7)
23 | expect(getState().count).toBe(7)
24 | // test unsubscribe
25 | unsubscribe('increment')
26 | await actions.increment(3)
27 | expect(state.count).toBe(10)
28 | expect(getState().count).toBe(10)
29 | expect(count).toBe(1)
30 | })
31 | })
32 |
--------------------------------------------------------------------------------
/__test__/SSR/index.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { Model } from '../../src'
3 | import { SSRCounter } from '..'
4 |
5 | describe('asyncState', () => {
6 | test('return default initial state from asyncState', async () => {
7 | const { getInitialState } = Model({
8 | WrappedSSRCounter: Model(SSRCounter),
9 | SSRCounter
10 | })
11 | const initialModels = await getInitialState(undefined, { isServer: true })
12 | // const state = getState('AsyncCounter')
13 | expect(initialModels['SSRCounter'].count).toBe(1)
14 | expect(initialModels['SSRCounter'].clientKey).toBe(undefined)
15 | expect(initialModels['WrappedSSRCounter'].count).toBe(1)
16 | expect(initialModels['WrappedSSRCounter'].clientKey).toBe(undefined)
17 |
18 | // Simulate Client Side
19 | const { getState } = Model(
20 | { WrappedSSRCounter: Model(SSRCounter), SSRCounter },
21 | initialModels
22 | )
23 | expect(initialModels['SSRCounter'].count).toBe(1)
24 | expect(initialModels['WrappedSSRCounter'].count).toBe(1)
25 | expect(getState('SSRCounter').clientKey).toBe('unused')
26 | expect(getState('WrappedSSRCounter').clientKey).toBe('unused')
27 | })
28 | })
29 |
--------------------------------------------------------------------------------
/__test__/actions/actions.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Model } from '../../src'
4 | import { ActionsTester } from '../index'
5 |
6 | describe('actions', () => {
7 | test('get actions from Model', async () => {
8 | const { actions, useStore } = Model({ ActionsTester })
9 | let state: any
10 | renderHook(() => {
11 | ;[state] = useStore('ActionsTester')
12 | })
13 | await actions.ActionsTester.getData()
14 | expect(state.data).toEqual({ counter: 1000 })
15 | })
16 | })
17 |
--------------------------------------------------------------------------------
/__test__/actions/getActions.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { ActionsTester } from '../index'
4 | import { Model } from '../../src'
5 |
6 | describe('actions', () => {
7 | test('call actions in action', async () => {
8 | const { getActions, getState } = Model({ ActionsTester })
9 | let state: any
10 | let actions: any
11 | renderHook(() => {
12 | actions = getActions('ActionsTester')
13 | })
14 | await actions.getData()
15 | state = getState('ActionsTester')
16 | expect(state.data).toEqual({ counter: 1000 })
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/__test__/actions/unmount.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { ActionsTester } from '../index'
4 | import { Model } from '../../src'
5 |
6 | describe('actions', () => {
7 | test('call actions in action', async () => {
8 | const { useStore } = Model({ ActionsTester })
9 | let state: any
10 | let actions: any
11 | const { unmount } = renderHook(() => {
12 | ;[state, actions] = useStore('ActionsTester')
13 | })
14 | await actions.getData()
15 | unmount()
16 | expect(state.data).toEqual({ counter: 1000 })
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/__test__/actions/useStore.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { ActionsTester } from '../index'
4 | import { Model } from '../../src'
5 |
6 | describe('actions', () => {
7 | test('call actions in action', async () => {
8 | const { useStore } = Model({ ActionsTester })
9 | let state: any
10 | let actions: any
11 | renderHook(() => {
12 | ;[state, actions] = useStore('ActionsTester')
13 | })
14 | await actions.getData()
15 | expect(state.data).toEqual({ counter: 1000 })
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/__test__/asyncState.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { Model } from '../src'
3 | import { AsyncCounter, AsyncNull } from '.'
4 |
5 | describe('asyncState', () => {
6 | test('asyncState accept context params with error modelName', async () => {
7 | const { getInitialState, getState } = Model({ AsyncCounter })
8 | await getInitialState({ count: 2, modelName: 'Async' })
9 | const state = getState('AsyncCounter')
10 | expect(state.count).toBe(0)
11 | })
12 | test('return default initial state from asyncState', async () => {
13 | const { getState, getInitialState } = Model({ AsyncCounter })
14 | await getInitialState()
15 | const state = getState('AsyncCounter')
16 | expect(state.count).toBe(1)
17 | })
18 | test('asyncState accept context params', async () => {
19 | const { getInitialState, getState } = Model({ AsyncCounter })
20 | await getInitialState({ count: 2 })
21 | const state = getState('AsyncCounter')
22 | expect(state.count).toBe(2)
23 | })
24 | test('asyncState accept context params with modelName', async () => {
25 | const { getInitialState, getState } = Model({ AsyncCounter })
26 | await getInitialState({ count: 3, modelName: 'AsyncCounter' })
27 | const state = getState('AsyncCounter')
28 | expect(state.count).toBe(3)
29 | })
30 | test('asyncState work without asyncState', async () => {
31 | const { getInitialState, getState } = Model({ AsyncNull })
32 | await getInitialState()
33 | const state = getState('AsyncNull')
34 | expect(state.count).toBe(0)
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/__test__/class/class.spec.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import * as React from 'react'
3 | import { Model, Provider, connect } from '../../src'
4 | import { Counter } from '../index'
5 | import { render, fireEvent } from '@testing-library/react'
6 | import { timeout } from '../../src/helper'
7 |
8 | const Button = connect(
9 | 'Counter',
10 | (props: any) => props
11 | )(
12 | class extends React.PureComponent {
13 | render() {
14 | const { state, actions } = this.props
15 | return (
16 |
23 | )
24 | }
25 | }
26 | )
27 |
28 | describe('class component', () => {
29 | test('Provider', () => {
30 | Model({ Counter })
31 | const { container } = render(
32 |
33 |
34 |
35 | )
36 | const button = container.firstChild
37 | expect(button!.textContent).toBe('0')
38 | })
39 | test('Consumer', async () => {
40 | Model({ Counter })
41 | const { container } = render(
42 |
43 |
44 |
45 | )
46 | const button: any = container.firstChild
47 | expect(button!.textContent).toBe('0')
48 | fireEvent.click(button)
49 | await timeout(100, {}) // Wait Consumer rerender
50 | expect(button!.textContent).toBe('3')
51 | })
52 | })
53 |
--------------------------------------------------------------------------------
/__test__/class/communicator.spec.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import * as React from 'react'
3 | import { Model, Provider, connect } from '../../src'
4 | import { Counter } from '../index'
5 | import { render, fireEvent } from '@testing-library/react'
6 | import { renderHook } from '@testing-library/react-hooks'
7 | import { timeout } from '../../src/helper'
8 |
9 | const Button = connect(
10 | 'Counter',
11 | (props: any) => props
12 | )(
13 | class extends React.PureComponent {
14 | render() {
15 | const { state, actions } = this.props
16 | return (
17 |
24 | )
25 | }
26 | }
27 | )
28 |
29 | describe('class component', () => {
30 | test('communicator', async () => {
31 | let state: any
32 | const { useStore } = Model({ Counter })
33 | renderHook(() => {
34 | ;[state] = useStore('Counter')
35 | })
36 | const { container } = render(
37 |
38 |
39 |
40 | )
41 | const button: any = container.firstChild
42 | expect(button!.textContent).toBe('0')
43 | fireEvent.click(button)
44 | await timeout(100, {}) // Wait Consumer rerender
45 | expect(button!.textContent).toBe('3')
46 | expect(state.count).toBe(3)
47 | })
48 | })
49 |
--------------------------------------------------------------------------------
/__test__/class/mapActions.spec.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import * as React from 'react'
3 | import { Model, Provider, connect } from '../../src'
4 | import { Counter } from '..'
5 | import { render } from '@testing-library/react'
6 |
7 | const Button = connect(
8 | 'Counter',
9 | (props: any) => props,
10 | (actions: any) => {
11 | REACT_MODEL: actions
12 | }
13 | )(
14 | class extends React.PureComponent {
15 | render() {
16 | const { state, REACT_MODEL, buttonName = '' } = this.props
17 | return (
18 |
26 | )
27 | }
28 | }
29 | )
30 |
31 | describe('class component', () => {
32 | test('render props', () => {
33 | Model({ Counter })
34 | const { container } = render(
35 |
36 |
37 |
38 | )
39 | const button = container.firstChild
40 | expect(button!.textContent).toBe('button0')
41 | })
42 | })
43 |
--------------------------------------------------------------------------------
/__test__/class/renderProps.spec.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import * as React from 'react'
3 | import { Model, Provider, connect } from '../../src'
4 | import { Counter } from '..'
5 | import { render } from '@testing-library/react'
6 |
7 | const Button = connect(
8 | 'Counter',
9 | (props: any) => props
10 | )(
11 | class extends React.PureComponent {
12 | render() {
13 | const { state, actions, buttonName = '' } = this.props
14 | return (
15 |
23 | )
24 | }
25 | }
26 | )
27 |
28 | describe('class component', () => {
29 | test('render props', () => {
30 | Model({ Counter })
31 | const { container } = render(
32 |
33 |
34 |
35 | )
36 | const button = container.firstChild
37 | expect(button!.textContent).toBe('button0')
38 | })
39 | })
40 |
--------------------------------------------------------------------------------
/__test__/connect.spec.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import * as React from 'react'
3 | import { Model, Provider, connect } from '../src'
4 | import { Counter, Theme } from './'
5 | import { render, fireEvent } from '@testing-library/react'
6 | import { timeout } from '../src/helper'
7 |
8 | const Button = connect('Counter', (props: any) => ({ counter: props }))(
9 | connect('Theme', (props: any) => ({ theme: props }))(
10 | class extends React.Component {
11 | render() {
12 | const { state, actions } = this.props
13 | return (
14 |
23 | )
24 | }
25 | }
26 | )
27 | )
28 |
29 | describe('class component', () => {
30 | test('multi connect', async () => {
31 | Model({ Counter, Theme })
32 | const { container } = render(
33 |
34 |
35 |
36 | )
37 | const button: any = container.firstChild
38 | expect(button!.textContent).toBe('0dark')
39 | fireEvent.click(button)
40 | await timeout(100, {}) // Wait Consumer rerender
41 | expect(button!.textContent).toBe('3light')
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/__test__/disable-dubugger.spec.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 | ///
3 | import { Model, middlewares } from '../src'
4 | import { Counter } from '.'
5 | import { renderHook } from '@testing-library/react-hooks'
6 |
7 | middlewares.config.logger.enable = ({ actionName }) =>
8 | ['increment'].indexOf(actionName) !== -1
9 |
10 | describe('PubSub', () => {
11 | test('run callback when specific action run', async () => {
12 | let actions: any
13 | let count = 0
14 | const { useStore, subscribe } = Model({ Counter })
15 | subscribe('Counter', 'increment', () => (count += 1))
16 | subscribe('Counter', 'add', () => (count += 10))
17 | renderHook(() => {
18 | ;[, actions] = useStore('Counter')
19 | })
20 | await actions.increment()
21 | await actions.add(1)
22 | await actions.increment()
23 | await actions.increment()
24 | expect(count).toBe(13)
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/__test__/dubugger.spec.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 | console.group = undefined
3 | ///
4 | import { Model, middlewares } from '../src'
5 | import { Counter } from '.'
6 | import { renderHook } from '@testing-library/react-hooks'
7 |
8 | describe('PubSub', () => {
9 | test('run callback when specific action run', async () => {
10 | middlewares.config.logger.enable = true
11 | let actions: any
12 | let count = 0
13 | const { useStore, subscribe } = Model({ Counter })
14 | subscribe('Counter', 'increment', () => (count += 1))
15 | subscribe('Counter', 'add', () => (count += 10))
16 | renderHook(() => {
17 | ;[, actions] = useStore('Counter')
18 | })
19 | await actions.increment()
20 | await actions.add(1)
21 | await actions.increment()
22 | await actions.increment()
23 | expect(count).toBe(13)
24 | middlewares.config.logger.enable = false
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/__test__/getActions.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Counter } from '.'
4 | import { Model } from '../src'
5 |
6 | describe('useStore', () => {
7 | test('return default initial values', () => {
8 | let state
9 | const { useStore } = Model({ Counter })
10 | renderHook(() => {
11 | ;[state] = useStore('Counter')
12 | })
13 | expect(state).toEqual({ count: 0 })
14 | })
15 | test('consumer actions return function', async () => {
16 | let state: any
17 | let actions: any
18 | const { useStore, getActions } = Model({ Counter })
19 | renderHook(() => {
20 | ;[state] = useStore('Counter')
21 | actions = getActions('Counter')
22 | })
23 | await actions.increment(3)
24 | expect(state).toEqual({ count: 3 })
25 | await actions.increment(4)
26 | expect(state.count).toBe(7)
27 | })
28 | })
29 |
--------------------------------------------------------------------------------
/__test__/getState.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { Model } from '../src'
3 | import { Counter } from '.'
4 |
5 | describe('getState', () => {
6 | test('return default initial state', () => {
7 | let state
8 | const { getState } = Model({ Counter })
9 | state = getState('Counter')
10 | expect(state.count).toBe(0)
11 | })
12 | })
13 |
--------------------------------------------------------------------------------
/__test__/index.d.ts:
--------------------------------------------------------------------------------
1 | type CounterState = {
2 | count: number
3 | }
4 |
5 | type SSRCounterState = {
6 | count: number
7 | clientKey: string
8 | }
9 |
10 | type ExtState = {
11 | name: string
12 | }
13 |
14 | type ThemeState = {
15 | theme: 'dark' | 'light'
16 | }
17 |
18 | type ActionTesterState = {
19 | response: { data: Object }
20 | data: Object
21 | }
22 |
23 | type CounterActionParams = {
24 | increment: number
25 | }
26 |
27 | type ExtActionParams = {
28 | ext: undefined
29 | }
30 |
31 | type NextCounterActionParams = {
32 | increment: number
33 | add: number
34 | }
35 |
36 | type ExtraActionParams = {
37 | add: number
38 | addCaller: undefined
39 | }
40 |
41 | type ThemeActionParams = {
42 | changeTheme: 'dark' | 'light'
43 | }
44 |
45 | type ActionTesterParams = {
46 | get: undefined
47 | parse: undefined
48 | getData: undefined
49 | }
50 |
--------------------------------------------------------------------------------
/__test__/index.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 | import { Model } from '../src'
4 | import { timeout } from '../src/helper'
5 | import { actionMiddlewares } from '../src/middlewares'
6 |
7 | export const ActionsTester: ModelType = {
8 | actions: {
9 | get: async () => {
10 | const response = await timeout(9, { code: 0, data: { counter: 1000 } })
11 | return { response }
12 | },
13 | getData: async (_, { actions }) => {
14 | await actions.get()
15 | actions.parse()
16 | },
17 | parse: () => {
18 | return state => {
19 | state.data = state.response.data
20 | }
21 | }
22 | },
23 | state: {
24 | data: {},
25 | response: {
26 | data: {}
27 | }
28 | }
29 | }
30 |
31 | export const Counter: ModelType<
32 | CounterState,
33 | CounterActionParams & ExtraActionParams
34 | > = {
35 | actions: {
36 | add: (params, { state }) => {
37 | return {
38 | count: state.count + params
39 | }
40 | },
41 | addCaller: (_, { actions }) => {
42 | actions.add(5)
43 | },
44 | increment: params => {
45 | return state => {
46 | state.count += params
47 | }
48 | }
49 | },
50 | state: { count: 0 }
51 | }
52 |
53 | // v3.0
54 | export const NextCounter: ModelType<
55 | CounterState,
56 | CounterActionParams & ExtraActionParams
57 | > = {
58 | actions: {
59 | add: (params, { state }) => {
60 | return {
61 | count: state.count + params
62 | }
63 | },
64 | addCaller: (_, { actions }) => {
65 | actions.add(5)
66 | },
67 | increment: params => {
68 | return state => {
69 | state.count += params
70 | }
71 | }
72 | },
73 | state: { count: 0 }
74 | }
75 |
76 | export const ExtCounter: ModelType<
77 | ExtState,
78 | ExtActionParams,
79 | { name: string }
80 | > = {
81 | actions: {
82 | ext: (_, { name }) => {
83 | return {
84 | name
85 | }
86 | }
87 | },
88 | state: { name: '' }
89 | }
90 |
91 | export const Theme: ModelType = {
92 | actions: {
93 | changeTheme: (_, { state }) => ({
94 | theme: state.theme === 'dark' ? 'light' : 'dark'
95 | })
96 | },
97 | state: {
98 | theme: 'dark'
99 | }
100 | }
101 |
102 | export const AsyncCounter: ModelType = {
103 | actions: {
104 | increment: params => {
105 | return state => {
106 | state.count += params
107 | }
108 | }
109 | },
110 | asyncState: async (context: { count?: number }) => ({
111 | count: context ? context.count || 1 : 1
112 | }),
113 | state: { count: 0 }
114 | }
115 |
116 | export const SSRCounter: ModelType = {
117 | actions: {
118 | increment: params => {
119 | return state => {
120 | state.count += params
121 | }
122 | }
123 | },
124 | asyncState: async (context: { count?: number }) => ({
125 | count: context ? context.count || 1 : 1
126 | }),
127 | state: { count: 0, clientKey: 'unused' }
128 | }
129 |
130 | export const AsyncNull: ModelType = {
131 | actions: {
132 | increment: params => {
133 | return state => {
134 | state.count += params
135 | }
136 | }
137 | },
138 | state: { count: 0 }
139 | }
140 |
141 | const timeoutCounter: ModelType = {
142 | actions: {
143 | increment: async (params, { state: _ }) => {
144 | await timeout(4000, {})
145 | return (state: typeof _) => {
146 | state.count += params
147 | }
148 | }
149 | },
150 | asyncState: async () => ({
151 | count: 1
152 | }),
153 | state: { count: 0 }
154 | }
155 |
156 | export const TimeoutCounter = Model(timeoutCounter)
157 |
158 | export const ErrorCounter: ModelType = {
159 | actions: {
160 | increment: async () => {
161 | throw 'error'
162 | }
163 | },
164 | state: { count: 0 }
165 | }
166 |
167 | const delayMiddleware: Middleware = async (context, restMiddlewares) => {
168 | await timeout(1000, {})
169 | context.next(restMiddlewares)
170 | }
171 |
172 | export const NextCounterModel: ModelType<
173 | CounterState,
174 | NextCounterActionParams
175 | > = {
176 | actions: {
177 | add: num => {
178 | return state => {
179 | state.count += num
180 | }
181 | },
182 | increment: async (num, { actions }) => {
183 | actions.add(num)
184 | await timeout(300, {})
185 | }
186 | },
187 | middlewares: [delayMiddleware, ...actionMiddlewares],
188 | state: {
189 | count: 0
190 | }
191 | }
192 |
--------------------------------------------------------------------------------
/__test__/middlewares/commuicator.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Model } from '../../src'
4 | import { Counter } from '..'
5 |
6 | describe('', () => {
7 | test('communicator', async () => {
8 | let stateFirst: any, stateSecond: any
9 | let actionsFirst: any, actionsSecond: any
10 | const { useStore, getActions } = Model({ Counter })
11 | const actions = getActions('Counter')
12 | renderHook(() => {
13 | ;[stateFirst, actionsFirst] = useStore('Counter')
14 | })
15 | renderHook(() => {
16 | ;[stateSecond, actionsSecond] = useStore('Counter')
17 | })
18 | expect(stateFirst.count).toBe(0)
19 | expect(stateSecond.count).toBe(0)
20 | await actionsFirst.increment(3)
21 | expect(stateFirst.count).toBe(3)
22 | expect(stateSecond.count).toBe(3)
23 | await actionsSecond.increment(4)
24 | expect(stateFirst.count).toBe(7)
25 | expect(stateSecond.count).toBe(7)
26 | await actions.increment(4)
27 | expect(stateFirst.count).toBe(11)
28 | expect(stateSecond.count).toBe(11)
29 | })
30 | })
31 |
--------------------------------------------------------------------------------
/__test__/middlewares/devToolsListener.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ;(window as any).__REDUX_DEVTOOLS_EXTENSION__ = {
3 | connect: () => {},
4 | send: () => {}
5 | }
6 | import { renderHook } from '@testing-library/react-hooks'
7 | import { Model, middlewares } from '../../src'
8 | import { Counter } from '..'
9 |
10 | middlewares.config.devtools.enable = true
11 |
12 | describe('withDevTools', () => {
13 | test("won't break the behavior without DevTools", async () => {
14 | let state: any
15 | let actions: any
16 | const { useStore } = Model({ Counter })
17 | renderHook(() => {
18 | ;[state, actions] = useStore('Counter')
19 | })
20 | expect(state).toEqual({ count: 0 })
21 | await actions.increment(3)
22 | expect(state.count).toBe(3)
23 | })
24 | })
25 |
--------------------------------------------------------------------------------
/__test__/middlewares/getNewStateWithCache.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { Model, middlewares, actionMiddlewares } from '../../src'
3 | import { renderHook } from '@testing-library/react-hooks'
4 | import { TimeoutCounter } from '..'
5 |
6 | describe('getNewStateWithCache: ', () => {
7 | test('cache when timeout', async () => {
8 | let state: any, actions: any
9 | const cacheMiddlewareIndex = actionMiddlewares.indexOf(
10 | middlewares.getNewState
11 | )
12 | actionMiddlewares[cacheMiddlewareIndex] = middlewares.getNewStateWithCache(
13 | 3000
14 | )
15 | const { useStore } = Model({ TimeoutCounter })
16 | renderHook(() => {
17 | ;[state, actions] = useStore('TimeoutCounter')
18 | })
19 | await actions.increment(3)
20 | expect(state).toEqual({ count: 0 })
21 | })
22 | })
23 |
--------------------------------------------------------------------------------
/__test__/middlewares/middlewareConfig.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Model } from '../../src'
4 | import { Counter } from '../'
5 |
6 | describe('middleware: ', () => {
7 | test("actions' middlewareConfig", async () => {
8 | let state: any
9 | let actions: any
10 | const { useStore } = Model({ Counter })
11 | renderHook(() => {
12 | ;[state, actions] = useStore('Counter')
13 | })
14 | await actions.add(3, { params: 'user-custom-params' })
15 | expect(state).toEqual({ count: 3 })
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/__test__/middlewares/model.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | process.env.NODE_ENV = 'production'
3 | import { renderHook } from '@testing-library/react-hooks'
4 | import { NextCounterModel } from '..'
5 | import { Model } from '../../src'
6 |
7 | describe('NextModel', () => {
8 | test("allows you to customize model's middleware", async () => {
9 | let actions: any, nextActions: any
10 | let state: any, nextState: any
11 | const WrapperModel = Model(NextCounterModel)
12 | const { useStore, getActions } = Model({ NextCounterModel, WrapperModel })
13 | const beginTime = Date.now()
14 | renderHook(() => {
15 | ;[state, actions] = useStore('NextCounterModel')
16 | ;[nextState, nextActions] = useStore('WrapperModel')
17 | })
18 | await actions.increment(2)
19 | await getActions('NextCounterModel').increment(1)
20 | expect(Date.now() - beginTime > 300)
21 | expect(state.count).toBe(3)
22 | await nextActions.increment(2)
23 | await getActions('WrapperModel').increment(1)
24 | expect(nextState.count).toBe(3)
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/__test__/middlewares/subscribe.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { Model } from '../../src'
3 | import { NextCounter } from '..'
4 | import { renderHook } from '@testing-library/react-hooks'
5 |
6 | describe('Subscribe middleware', () => {
7 | test('run callback when specific action run', async () => {
8 | let actions: any
9 | let count = 0
10 | const Counter = Model(NextCounter)
11 | const { useStore, subscribe } = Model({ Counter })
12 | subscribe('Counter', ['increment'], () => (count += 1))
13 | subscribe('Counter', 'add', () => (count += 10))
14 | subscribe('Counter', ['increment', 'add'], () => (count += 5))
15 | renderHook(() => {
16 | ;[, actions] = useStore('Counter')
17 | })
18 | await actions.increment()
19 | await actions.add(1)
20 | await actions.increment()
21 | await actions.increment()
22 | expect(count).toBe(33)
23 | await actions.addCaller()
24 | expect(count).toBe(48)
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/__test__/middlewares/tryCatch.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | process.env.NODE_ENV = 'production'
3 | import { Model, middlewares } from '../../src'
4 | import { ErrorCounter } from '..'
5 | import { renderHook } from '@testing-library/react-hooks'
6 |
7 | describe('tryCatch', () => {
8 | test("catch actions' error in production", async () => {
9 | let actions: any
10 | let errNum = 0
11 | const { useStore } = Model({ ErrorCounter })
12 | renderHook(() => {
13 | ;[, actions] = useStore('ErrorCounter')
14 | })
15 | await actions.increment().catch(() => {
16 | errNum += 1
17 | })
18 | expect(errNum).toBe(0)
19 | })
20 |
21 | test("throw actions' error when turn off tryCatch middleware", async () => {
22 | let actions: any
23 | let errNum = 0
24 | middlewares.config.tryCatch.enable = false
25 | const { useStore } = Model({ ErrorCounter })
26 | renderHook(() => {
27 | ;[, actions] = useStore('ErrorCounter')
28 | })
29 | await actions.increment().catch(() => {
30 | errNum += 1
31 | })
32 | expect(errNum).toBe(1)
33 | })
34 | })
35 |
--------------------------------------------------------------------------------
/__test__/middlewares/unsubscribe.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { Model } from '../../src'
3 | import { Counter } from '..'
4 | import { renderHook } from '@testing-library/react-hooks'
5 |
6 | describe('Subscribe middleware', () => {
7 | test('run callback when specific action run', async () => {
8 | let actions: any
9 | let count = 0
10 | const { useStore, subscribe, unsubscribe } = Model({ Counter })
11 | subscribe('Counter', ['increment'], () => (count += 1))
12 | subscribe('Counter', 'add', () => (count += 10))
13 | subscribe('Counter', ['increment', 'add'], () => (count += 5))
14 | renderHook(() => {
15 | ;[, actions] = useStore('Counter')
16 | })
17 | await actions.increment()
18 | unsubscribe('Counter', 'add')
19 | await actions.add(1)
20 | unsubscribe('Counter', ['add', 'increment'])
21 | await actions.increment()
22 | await actions.increment()
23 | expect(count).toBe(6)
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/__test__/selector/model.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Model } from '../../src'
4 | import { Counter } from '..'
5 |
6 | describe('selector', () => {
7 | test("model's selector", async () => {
8 | let isCounterOdd: boolean = true,
9 | state: any
10 | let actionsFirst: any, actionsSecond: any
11 | let renderTime = 0
12 | const { useStore, actions } = Model(Counter)
13 | renderHook(() => {
14 | ;[isCounterOdd, actionsFirst] = useStore(({ count }) => count % 2 !== 0)
15 | renderTime += 1
16 | })
17 | renderHook(() => {
18 | ;[state, actionsSecond] = useStore()
19 | })
20 | expect(isCounterOdd).toBe(false)
21 | expect(state.count).toBe(0)
22 | expect(renderTime).toBe(1)
23 | await actionsFirst.increment(3)
24 | expect(isCounterOdd).toBe(true)
25 | expect(state.count).toBe(3)
26 | expect(renderTime).toBe(2)
27 | await actionsSecond.increment(4)
28 | expect(isCounterOdd).toBe(true)
29 | expect(state.count).toBe(7)
30 | expect(renderTime).toBe(2)
31 | await actions.increment(4)
32 | expect(isCounterOdd).toBe(true)
33 | expect(state.count).toBe(11)
34 | expect(renderTime).toBe(2)
35 | await actions.add(1)
36 | expect(isCounterOdd).toBe(false)
37 | expect(state.count).toBe(12)
38 | expect(renderTime).toBe(3)
39 | })
40 | })
41 |
--------------------------------------------------------------------------------
/__test__/selector/models.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Model } from '../../src'
4 | import { Counter } from '..'
5 |
6 | describe('selector', () => {
7 | test("models' selector", async () => {
8 | let isCounterOdd: boolean = true,
9 | state: any
10 | let actionsFirst: any, actionsSecond: any
11 | let renderTime = 0
12 | const { useStore, actions } = Model({ Counter })
13 | renderHook(() => {
14 | ;[isCounterOdd, actionsFirst] = useStore(
15 | 'Counter',
16 | ({ count }) => count % 2 !== 0
17 | )
18 | renderTime += 1
19 | })
20 | renderHook(() => {
21 | ;[state, actionsSecond] = useStore('Counter')
22 | })
23 | expect(isCounterOdd).toBe(false)
24 | expect(state.count).toBe(0)
25 | expect(renderTime).toBe(1)
26 | await actionsFirst.increment(3)
27 | expect(isCounterOdd).toBe(true)
28 | expect(state.count).toBe(3)
29 | expect(renderTime).toBe(2)
30 | await actionsSecond.increment(4)
31 | expect(isCounterOdd).toBe(true)
32 | expect(state.count).toBe(7)
33 | expect(renderTime).toBe(2)
34 | await actions.Counter.increment(4)
35 | expect(isCounterOdd).toBe(true)
36 | expect(state.count).toBe(11)
37 | expect(renderTime).toBe(2)
38 | await actions.Counter.add(1)
39 | expect(isCounterOdd).toBe(false)
40 | expect(state.count).toBe(12)
41 | expect(renderTime).toBe(3)
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/__test__/selector/shallowEqual.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Model } from '../../src'
4 | import { Counter } from '..'
5 |
6 | describe('selector', () => {
7 | test("model's selector", async () => {
8 | let selectedState: { odd: boolean; count?: number } = { odd: true },
9 | state: any
10 | let actionsFirst: any, actionsSecond: any
11 | let renderTime = 0
12 | const { useStore, actions } = Model(Counter)
13 | renderHook(() => {
14 | ;[selectedState, actionsFirst] = useStore(({ count }) =>
15 | count < 10
16 | ? {
17 | odd: count % 2 !== 0
18 | }
19 | : {
20 | count,
21 | odd: count % 2 !== 0
22 | }
23 | )
24 | renderTime += 1
25 | })
26 | renderHook(() => {
27 | ;[state, actionsSecond] = useStore()
28 | })
29 | expect(selectedState.odd).toBe(false)
30 | expect(state.count).toBe(0)
31 | expect(renderTime).toBe(1)
32 | await actionsFirst.increment(3)
33 | // odd state change, rerender
34 | expect(selectedState.odd).toBe(true)
35 | expect(state.count).toBe(3)
36 | expect(renderTime).toBe(2)
37 | await actionsSecond.increment(4)
38 | expect(selectedState.odd).toBe(true)
39 | expect(state.count).toBe(7)
40 | expect(renderTime).toBe(2)
41 | await actions.increment(4)
42 | // selected keys num + 1, rerender
43 | expect(selectedState.odd).toBe(true)
44 | expect(state.count).toBe(11)
45 | expect(renderTime).toBe(3)
46 | await actions.add(1)
47 | // odd state change, rerender
48 | expect(selectedState.odd).toBe(false)
49 | expect(state.count).toBe(12)
50 | expect(renderTime).toBe(4)
51 | })
52 | })
53 |
--------------------------------------------------------------------------------
/__test__/useStore/actions.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Counter } from '..'
4 | import { Model } from '../../src'
5 |
6 | describe('useStore', () => {
7 | test('consumer actions return Partial', async () => {
8 | let state: any
9 | let actions: any
10 | const { useStore } = Model({ Counter })
11 | renderHook(() => {
12 | ;[state, actions] = useStore('Counter')
13 | })
14 | await actions.add(3)
15 | expect(state).toEqual({ count: 3 })
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/__test__/useStore/initial.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { renderHook } from '@testing-library/react-hooks'
3 | import { Model } from '../../src'
4 | import { Counter } from '..'
5 |
6 | describe('useStore', () => {
7 | test('return default initial values', () => {
8 | let state
9 | const { useStore } = Model({ Counter })
10 | renderHook(() => {
11 | ;[state] = useStore('Counter')
12 | })
13 | expect(state).toEqual({ count: 0 })
14 | })
15 | test('consumer actions return function', async () => {
16 | let state: any
17 | let actions: any
18 | const { useStore } = Model({ Counter })
19 | renderHook(() => {
20 | ;[state, actions] = useStore('Counter')
21 | })
22 | await actions.increment(3)
23 | expect(state).toEqual({ count: 3 })
24 | await actions.increment(4)
25 | expect(state.count).toBe(7)
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/__test__/useStore/initialModels.spec.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { AsyncCounter } from '..'
3 | import { Model } from '../../src'
4 |
5 | describe('useStore', () => {
6 | test('use initialModels', async () => {
7 | const { getInitialState } = Model({ AsyncCounter })
8 | const initialModels = await getInitialState()
9 | const { getState } = Model({ AsyncCounter }, initialModels)
10 | const state = getState('AsyncCounter')
11 | expect(state.count).toBe(1)
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {extends: ['@commitlint/config-conventional']}
2 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | // For a detailed explanation regarding each configuration property, visit:
2 | // https://jestjs.io/docs/en/configuration.html
3 |
4 | module.exports = {
5 | // All imported modules in your tests should be mocked automatically
6 | // automock: false,
7 |
8 | // Stop running tests after `n` failures
9 | // bail: 0,
10 |
11 | // Respect "browser" field in package.json when resolving modules
12 | // browser: false,
13 |
14 | // The directory where Jest should store its cached dependency information
15 | // cacheDirectory: "/private/var/folders/h9/lgs7v_813jl7rdb_bfsqdw700000gn/T/jest_dx",
16 |
17 | // Automatically clear mock calls and instances between every test
18 | clearMocks: true,
19 |
20 | // Indicates whether the coverage information should be collected while executing the test
21 | // collectCoverage: false,
22 |
23 | // An array of glob patterns indicating a set of files for which coverage information should be collected
24 | // collectCoverageFrom: null,
25 |
26 | // The directory where Jest should output its coverage files
27 | coverageDirectory: 'coverage',
28 |
29 | // An array of regexp pattern strings used to skip coverage collection
30 | coveragePathIgnorePatterns: ['/node_modules/', '/__test__/'],
31 |
32 | // A list of reporter names that Jest uses when writing coverage reports
33 | coverageReporters: ['json-summary', 'json', 'text', 'lcov', 'clover'],
34 |
35 | // An object that configures minimum threshold enforcement for coverage results
36 | // coverageThreshold: null,
37 |
38 | // A path to a custom dependency extractor
39 | // dependencyExtractor: null,
40 |
41 | // Make calling deprecated APIs throw helpful error messages
42 | // errorOnDeprecated: false,
43 |
44 | // Force coverage collection from ignored files usin a array of glob patterns
45 | // forceCoverageMatch: [],
46 |
47 | // A path to a module which exports an async function that is triggered once before all test suites
48 | // globalSetup: null,
49 |
50 | // A path to a module which exports an async function that is triggered once after all test suites
51 | // globalTeardown: null,
52 |
53 | // A set of global variables that need to be available in all test environments
54 | // globals: {},
55 |
56 | // An array of directory names to be searched recursively up from the requiring module's location
57 | // moduleDirectories: [
58 | // "node_modules"
59 | // ],
60 |
61 | // An array of file extensions your modules use
62 | // moduleFileExtensions: [
63 | // "js",
64 | // "json",
65 | // "jsx",
66 | // "ts",
67 | // "tsx",
68 | // "node"
69 | // ],
70 |
71 | // A map from regular expressions to module names that allow to stub out resources with a single module
72 | // moduleNameMapper: {},
73 |
74 | // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
75 | // modulePathIgnorePatterns: [],
76 |
77 | // Activates notifications for test results
78 | // notify: false,
79 |
80 | // An enum that specifies notification mode. Requires { notify: true }
81 | // notifyMode: "failure-change",
82 |
83 | // A preset that is used as a base for Jest's configuration
84 | preset: 'ts-jest'
85 |
86 | // Run tests from one or more projects
87 | // projects: null,
88 |
89 | // Use this configuration option to add custom reporters to Jest
90 | // reporters: undefined,
91 |
92 | // Automatically reset mock state between every test
93 | // resetMocks: false,
94 |
95 | // Reset the module registry before running each individual test
96 | // resetModules: false,
97 |
98 | // A path to a custom resolver
99 | // resolver: null,
100 |
101 | // Automatically restore mock state between every test
102 | // restoreMocks: false,
103 |
104 | // The root directory that Jest should scan for tests and modules within
105 | // rootDir: null,
106 |
107 | // A list of paths to directories that Jest should use to search for files in
108 | // roots: [
109 | // ""
110 | // ],
111 |
112 | // Allows you to use a custom runner instead of Jest's default test runner
113 | // runner: "jest-runner",
114 |
115 | // The paths to modules that run some code to configure or set up the testing environment before each test
116 | // setupFiles: [],
117 |
118 | // A list of paths to modules that run some code to configure or set up the testing framework before each test
119 | // setupFilesAfterEnv: [],
120 |
121 | // A list of paths to snapshot serializer modules Jest should use for snapshot testing
122 | // snapshotSerializers: [],
123 |
124 | // The test environment that will be used for testing
125 | // testEnvironment: "jest-environment-jsdom",
126 |
127 | // Options that will be passed to the testEnvironment
128 | // testEnvironmentOptions: {},
129 |
130 | // Adds a location field to test results
131 | // testLocationInResults: false,
132 |
133 | // The glob patterns Jest uses to detect test files
134 | // testMatch: [
135 | // "**/__tests__/**/*.[jt]s?(x)",
136 | // "**/?(*.)+(spec|test).[tj]s?(x)"
137 | // ],
138 |
139 | // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
140 | // testPathIgnorePatterns: [
141 | // "/node_modules/"
142 | // ],
143 |
144 | // The regexp pattern or array of patterns that Jest uses to detect test files
145 | // testRegex: [],
146 |
147 | // This option allows the use of a custom results processor
148 | // testResultsProcessor: null,
149 |
150 | // This option allows use of a custom test runner
151 | // testRunner: "jasmine2",
152 |
153 | // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
154 | // testURL: "http://localhost",
155 |
156 | // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
157 | // timers: "real",
158 |
159 | // A map from regular expressions to paths to transformers
160 | // transform: null,
161 |
162 | // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
163 | // transformIgnorePatterns: [
164 | // "/node_modules/"
165 | // ],
166 |
167 | // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
168 | // unmockedModulePathPatterns: undefined,
169 |
170 | // Indicates whether each individual test should be reported during the run
171 | // verbose: null,
172 |
173 | // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
174 | // watchPathIgnorePatterns: [],
175 |
176 | // Whether to use watchman for file crawling
177 | // watchman: true,
178 | }
179 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-model",
3 | "version": "4.0.0",
4 | "description": "The State management library for React",
5 | "main": "./dist/react-model.js",
6 | "module": "./dist/react-model.esm.js",
7 | "umd:main": "./dist/react-model.umd.js",
8 | "types": "./src/index",
9 | "scripts": {
10 | "build": "microbundle --sourcemap false --jsx React.createElement --output dist --tsconfig ./tsconfig.json",
11 | "commit": "git-cz",
12 | "lint-ts": "tslint -c tslint.json 'src/**/*.ts'",
13 | "lint-md": "remark .",
14 | "test": "jest --silent",
15 | "test:coverage": "jest --collect-coverage --silent"
16 | },
17 | "keywords": ["react", "model", "state-management", "react-hooks"],
18 | "author": "ArrayZoneYour ",
19 | "license": "MIT",
20 | "dependencies": {
21 | "immer": ">=8.0.1"
22 | },
23 | "peerDependencies": {
24 | "react": ">=16.3.0",
25 | "react-dom": ">=16.3.0"
26 | },
27 | "devDependencies": {
28 | "@commitlint/cli": "^8.1.0",
29 | "@commitlint/config-conventional": "^8.1.0",
30 | "@testing-library/react": "^10.0.1",
31 | "@testing-library/react-hooks": "^2.0.1",
32 | "@types/babel__core": "^7.1.1",
33 | "@types/babel__template": "^7.0.2",
34 | "@types/jest": "^25.1.0",
35 | "@types/node": "^14.0.0",
36 | "@types/react": "^16.9.1",
37 | "@types/react-dom": "^16.8.0",
38 | "commitizen": "^4.0.0",
39 | "cz-conventional-changelog": "^3.0.0",
40 | "husky": "^4.0.2",
41 | "jest": "^24.1.0",
42 | "microbundle": "^0.12.3",
43 | "prettier": "^2.0.0",
44 | "react": "^16.8.4",
45 | "react-dom": "^16.8.4",
46 | "react-test-renderer": "^16.8.6",
47 | "remark-cli": "^8.0.0",
48 | "remark-lint": "^7.0.0",
49 | "remark-preset-lint-recommended": "^4.0.0",
50 | "ts-jest": "^26.0.0",
51 | "tslint": "^5.14.0",
52 | "typescript": "^3.4.5"
53 | },
54 | "husky": {
55 | "hooks": {
56 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
57 | }
58 | },
59 | "repository": {
60 | "type": "git",
61 | "url": "git+https://github.com/byte-fe/react-model"
62 | },
63 | "bugs": {
64 | "url": "https://github.com/byte-fe/react-model/issues"
65 | },
66 | "homepage": "https://github.com/byte-fe/react-model#readme",
67 | "config": {
68 | "commitizen": {
69 | "path": "./node_modules/cz-conventional-changelog"
70 | }
71 | },
72 | "browserslist": [
73 | "edge 17",
74 | "firefox 70",
75 | "chrome 48",
76 | "safari 12.1",
77 | "android 4.0",
78 | "samsung 9.2"
79 | ]
80 | }
81 |
--------------------------------------------------------------------------------
/src/global.ts:
--------------------------------------------------------------------------------
1 | const State = {}
2 | const Actions = {}
3 | const AsyncState = {}
4 | const Middlewares = {}
5 | // Communicate between Provider-Consumer and Hooks
6 | const Setter: Setter = {
7 | // classSetter stores the setState from Provider
8 | // Invoke the classSetter.setState can update the state of Global Provider.
9 | classSetter: undefined,
10 | // functionSetter stores the setState returned by useStore.
11 | // These setStates can invoke the rerender of hooks components.
12 | functionSetter: {}
13 | }
14 |
15 | const Context = {
16 | __global: {}
17 | }
18 |
19 | const subscriptions = {}
20 |
21 | let devTools: any
22 | let withDevTools = false
23 |
24 | let uid = 0 // The unique id of hooks
25 |
26 | export default {
27 | Actions,
28 | AsyncState,
29 | Context,
30 | Middlewares,
31 | Setter,
32 | State,
33 | devTools,
34 | subscriptions,
35 | uid,
36 | withDevTools
37 | } as Global
38 |
--------------------------------------------------------------------------------
/src/helper.ts:
--------------------------------------------------------------------------------
1 | import produce from 'immer'
2 | import { createContext } from 'react'
3 | import Global from './global'
4 | import { actionMiddlewares, applyMiddlewares } from './middlewares'
5 |
6 | const initialProviderState: Global['State'] = {}
7 | const GlobalContext = createContext(initialProviderState)
8 | const Consumer = GlobalContext.Consumer
9 |
10 | // console.group polyfill
11 | if (!console.group) {
12 | const groups: any[] = []
13 | const hr = '-'.repeat(80) // 80 dashes row line
14 | console.group = function logGroupStart(label: any) {
15 | groups.push(label)
16 | console.log('%c \nBEGIN GROUP: %c', hr, label)
17 | console.groupEnd = function logGroupEnd() {
18 | console.log('END GROUP: %c\n%c', groups.pop(), hr)
19 | }
20 | }
21 | }
22 |
23 | const consumerAction = (
24 | action: Action,
25 | modelContext: { modelName: string }
26 | ) => async (params: any, middlewareConfig?: any) => {
27 | const context: InnerContext = {
28 | Global,
29 | action,
30 | actionName: action.name,
31 | consumerActions,
32 | middlewareConfig,
33 | modelName: modelContext.modelName,
34 | newState: null,
35 | params,
36 | type: 'outer'
37 | }
38 | await applyMiddlewares(actionMiddlewares, context)
39 | }
40 |
41 | const consumerActions = (
42 | actions: Actions,
43 | modelContext: { modelName: string }
44 | ) => {
45 | const ret: any = {}
46 | Object.keys(actions).forEach((key) => {
47 | // @ts-ignore
48 | ret[key] = consumerAction(actions[key], modelContext)
49 | })
50 | return ret
51 | }
52 |
53 | const setPartialState = (
54 | name: keyof typeof Global['State'],
55 | partialState:
56 | | typeof Global['State']
57 | | ((state: typeof Global['State']['name']) => void)
58 | ) => {
59 | if (typeof partialState === 'function') {
60 | let state = Global.State[name]
61 | state = produce(state, partialState)
62 | Global.State = produce(Global.State, (s) => {
63 | s[name] = state
64 | })
65 | } else {
66 | Global.State = produce(Global.State, (s) => {
67 | s[name] = {
68 | ...s[name],
69 | ...partialState
70 | }
71 | })
72 | }
73 | return Global.State
74 | }
75 |
76 | const timeout = (ms: number, data: T): Promise =>
77 | new Promise((resolve) =>
78 | setTimeout(() => {
79 | console.log(ms)
80 | resolve(data)
81 | }, ms)
82 | )
83 |
84 | const getInitialState = async (
85 | context?: T,
86 | config?: { isServer?: boolean }
87 | ) => {
88 | const ServerState: { [name: string]: any } = { __FROM_SERVER__: true }
89 | await Promise.all(
90 | Object.keys(Global.State).map(async (modelName) => {
91 | if (
92 | !context ||
93 | !context.modelName ||
94 | modelName === context.modelName ||
95 | context.modelName.indexOf(modelName) !== -1
96 | ) {
97 | const asyncGetter = Global.AsyncState[modelName]
98 | const asyncState = asyncGetter ? await asyncGetter(context) : {}
99 | if (config && config.isServer) {
100 | ServerState[modelName] = asyncState
101 | } else {
102 | Global.State = produce(Global.State, (s) => {
103 | s[modelName] = { ...s[modelName], ...asyncState }
104 | })
105 | }
106 | }
107 | })
108 | )
109 | return config && config.isServer ? ServerState : Global.State
110 | }
111 |
112 | const getCache = (modelName: string, actionName: string) => {
113 | const JSONString = localStorage.getItem(
114 | `__REACT_MODELX__${modelName}_${actionName}`
115 | )
116 | return JSONString ? JSON.parse(JSONString) : null
117 | }
118 |
119 | const shallowEqual = (objA: any, objB: any) => {
120 | if (objA === objB) return true
121 | if (
122 | typeof objA !== 'object' ||
123 | objA === null ||
124 | typeof objB !== 'object' ||
125 | objB === null
126 | ) {
127 | return false
128 | }
129 | const keysA = Object.keys(objA)
130 | const keysB = Object.keys(objB)
131 |
132 | if (keysA.length !== keysB.length) return false
133 |
134 | for (let i = 0; i < keysA.length; i++) {
135 | if (
136 | !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
137 | objA[keysA[i]] !== objB[keysA[i]]
138 | ) {
139 | return false
140 | }
141 | }
142 |
143 | return true
144 | }
145 |
146 | export {
147 | Consumer,
148 | consumerActions,
149 | GlobalContext,
150 | setPartialState,
151 | shallowEqual,
152 | timeout,
153 | getCache,
154 | getInitialState
155 | }
156 |
--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | type Setter = {
2 | classSetter: ClassSetter
3 | functionSetter: FunctionSetter
4 | }
5 |
6 | type FunctionSetter = {
7 | [modelName: string]: {
8 | [actionName: string]: {
9 | setState: React.Dispatch
10 | selector?: Function
11 | selectorRef?: unknown
12 | }
13 | }
14 | }
15 |
16 | type Equals = (() => T extends X ? 1 : 2) extends () => T extends Y
17 | ? 1
18 | : 2
19 | ? true
20 | : false
21 |
22 | interface Global {
23 | Actions: {
24 | [modelName: string]: {
25 | [actionName: string]: Action
26 | }
27 | }
28 | State: {
29 | [modelName: string]: any
30 | }
31 | AsyncState: {
32 | [modelName: string]: undefined | ((context?: any) => Promise>)
33 | }
34 | Context: any
35 | Middlewares: {
36 | [modelName: string]: Middleware[]
37 | }
38 | subscriptions: Subscriptions
39 | Setter: Setter
40 | devTools: any
41 | withDevTools: boolean
42 | uid: number
43 | }
44 |
45 | type ClassSetter = React.Dispatch | undefined
46 |
47 | // Very Sad, Promise> can not work with Partial | ProduceFunc
48 | type Action = (
49 | params: P,
50 | context: {
51 | state: S
52 | actions: getConsumerActionsType>
53 | } & ExtContext
54 | ) =>
55 | | Partial
56 | | Promise>
57 | | ProduceFunc
58 | | Promise>
59 | | void
60 | | Promise
61 |
62 | type ProduceFunc = (state: S) => void
63 |
64 | // v3.0 Actions
65 | type Actions = {
66 | [P in keyof ActionKeys]: Action
67 | }
68 |
69 | type Dispatch = (value: A) => void
70 | type SetStateAction = S | ((prevState: S) => S)
71 |
72 | interface ModelContext {
73 | modelName: string
74 | }
75 |
76 | interface BaseContext {
77 | action: Action
78 | consumerActions: (
79 | actions: Actions,
80 | modelContext: ModelContext
81 | ) => getConsumerActionsType
82 | params: Object
83 | middlewareConfig?: Object
84 | actionName: string
85 | modelName: string
86 | next?: Function
87 | newState: Global['State'] | Function | null
88 | Global: Global
89 | }
90 |
91 | interface InnerContext extends BaseContext {
92 | // Actions with function type context will always invoke current component's reload.
93 | type?: 'function' | 'outer' | 'class'
94 | __hash?: string
95 | }
96 |
97 | type Context = InnerContext & {
98 | next: Function
99 | modelMiddlewares?: Middleware[]
100 | }
101 |
102 | type Middleware = (C: Context, M: Middleware[]) => void
103 |
104 | type MiddlewareConfig = {
105 | logger: {
106 | enable: boolean | ((context: BaseContext) => boolean)
107 | }
108 | devtools: { enable: boolean }
109 | tryCatch: { enable: boolean }
110 | }
111 |
112 | interface Models {
113 | [name: string]:
114 | | ModelType
115 | | API>
116 | }
117 |
118 | type Selector = (state: S) => R
119 |
120 | interface API> {
121 | __id: string
122 | __ERROR__?: boolean
123 | useStore: <
124 | F extends Selector, any> = Selector<
125 | Get,
126 | unknown
127 | >
128 | >(
129 | selector?: F
130 | ) => [
131 | F extends Selector, any>
132 | ? Equals, unknown>> extends true
133 | ? Get
134 | : ReturnType
135 | : Get,
136 | getConsumerActionsType>
137 | ]
138 | getState: () => Readonly>
139 | subscribe: (
140 | actionName: keyof MT['actions'] | Array,
141 | callback: () => void
142 | ) => void
143 | unsubscribe: (
144 | actionName: keyof Get | Array>
145 | ) => void
146 | actions: Readonly>>
147 | }
148 |
149 | interface APIs {
150 | useStore: <
151 | K extends keyof M,
152 | S extends M[K] extends API
153 | ? ArgumentTypes>[1]
154 | : M[K] extends ModelType
155 | ? Selector, unknown>
156 | : any
157 | >(
158 | name: K,
159 | selector?: S
160 | ) => M[K] extends API
161 | ? S extends (...args: any) => void
162 | ? Equals extends true
163 | ? [ReturnType>, Get]
164 | : ReturnType
165 | : ReturnType>
166 | : M[K] extends ModelType
167 | ? S extends (...args: any) => void
168 | ? [
169 | Equals, unknown> extends true
170 | ? Get
171 | : ReturnType,
172 | getConsumerActionsType>
173 | ]
174 | : [Get, getConsumerActionsType>]
175 | : any
176 |
177 | getState: (
178 | modelName: K
179 | ) => M[K] extends ModelType
180 | ? Readonly>
181 | : M[K] extends API
182 | ? ReturnType>
183 | : any
184 | getActions: (
185 | modelName: K
186 | ) => M[K] extends ModelType
187 | ? Readonly>>
188 | : M[K] extends API
189 | ? M[K]['actions']
190 | : unknown
191 | getInitialState: (
192 | context?: T | undefined,
193 | config?: { isServer: boolean }
194 | ) => Promise<{
195 | [modelName: string]: any
196 | }>
197 | subscribe: (
198 | modelName: K,
199 | actionName: keyof Get | Array>,
200 | callback: () => void
201 | ) => void
202 | unsubscribe: (
203 | modelName: K,
204 | actionName: keyof Get | Array>
205 | ) => void
206 | actions: {
207 | [K in keyof M]: M[K] extends API
208 | ? M[K]['actions']
209 | : Readonly>>
210 | }
211 | }
212 |
213 | // v3.0
214 | type ModelType<
215 | InitStateType = any,
216 | ActionKeys = any,
217 | ExtContext extends {} = {}
218 | > = {
219 | __ERROR__?: boolean
220 | actions: {
221 | [P in keyof ActionKeys]: Action<
222 | InitStateType,
223 | ActionKeys[P],
224 | ActionKeys,
225 | ExtContext
226 | >
227 | }
228 | middlewares?: Middleware[]
229 | state: InitStateType
230 | asyncState?: (context?: any) => Promise>
231 | }
232 |
233 | type ArgumentTypes = F extends (...args: infer A) => any
234 | ? A
235 | : never
236 |
237 | // v3.0
238 | // TODO: ArgumentTypes[0] = undefined | string
239 | type getConsumerActionsType> = {
240 | [P in keyof A]: ArgumentTypes[0] extends undefined
241 | ? (params?: ArgumentTypes[0]) => ReturnType
242 | : (params: ArgumentTypes[0]) => ReturnType
243 | }
244 |
245 | type Get = Object[K]
246 |
247 | type ModelsProps = {
248 | useStore: (
249 | name: K,
250 | models?: M
251 | ) => M[K] extends ModelType
252 | ? [Get, getConsumerActionsType>]
253 | : M[K]
254 | getState: (
255 | modelName: K
256 | ) => M[K] extends ModelType ? Readonly> : M[K]
257 | }
258 |
259 | type Subscriptions = {
260 | [key: string]: Function[]
261 | }
262 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | // Remember to remove types: ./src/index when run `yarn build` command
2 | ///
3 | import produce, { enableES5 } from 'immer'
4 | enableES5()
5 | import * as React from 'react'
6 | import { PureComponent, useEffect, useState, useRef } from 'react'
7 | import Global from './global'
8 | import {
9 | Consumer,
10 | consumerActions,
11 | getInitialState,
12 | GlobalContext
13 | } from './helper'
14 | import { actionMiddlewares, applyMiddlewares, middlewares } from './middlewares'
15 |
16 | const isModelType = (input: any): input is ModelType => {
17 | return (input as ModelType).state !== undefined
18 | }
19 |
20 | const isAPI = (input: any): input is API => {
21 | return (input as API).useStore !== undefined
22 | }
23 |
24 | function Model>(
25 | models: MT,
26 | // initialState represent extContext here
27 | initialState?: E
28 | ): API
29 | function Model(
30 | models: M,
31 | initialState?: Global['State']
32 | ): APIs
33 | function Model(
34 | models: M | MT,
35 | initialState?: Global['State'],
36 | extContext?: E
37 | ) {
38 | if (isModelType(models)) {
39 | Global.uid += 1
40 | const hash = '__' + Global.uid
41 | Global.State = produce(Global.State, (s) => {
42 | s[hash] = models.state
43 | })
44 | if (models.middlewares) {
45 | Global.Middlewares[hash] = models.middlewares
46 | }
47 | Global.Actions[hash] = models.actions
48 | Global.AsyncState[hash] = models.asyncState
49 | // initialState represent extContext here
50 | initialState && (Global.Context[hash] = initialState)
51 | const actions = getActions(hash)
52 | return {
53 | __id: hash,
54 | actions,
55 | getState: () => getState(hash),
56 | subscribe: (
57 | actionName: keyof MT['actions'] | Array,
58 | callback: () => void
59 | ) => subscribe(hash, actionName as string | string[], callback),
60 | unsubscribe: (
61 | actionName: keyof MT['actions'] | Array
62 | ) => unsubscribe(hash, actionName as string | string[]),
63 | useStore: (selector?: Function) => useStore(hash, selector)
64 | }
65 | } else {
66 | if (models.actions) {
67 | console.error('invalid model(s) schema: ', models)
68 | const errorFn = (fakeReturnVal?: unknown) => (..._: unknown[]) => {
69 | return fakeReturnVal
70 | }
71 | // Fallback Functions
72 | return {
73 | __ERROR__: true,
74 | actions: errorFn({}),
75 | getActions: errorFn({}),
76 | getInitialState: errorFn({}),
77 | getState: errorFn({}),
78 | subscribe: errorFn(),
79 | unsubscribe: errorFn(),
80 | useStore: errorFn([{}, {}])
81 | } as any
82 | }
83 | if (initialState && !initialState.__FROM_SERVER__) {
84 | Global.State = produce(Global.State, (s) => {
85 | Object.assign(s, initialState || {})
86 | })
87 | }
88 | extContext && (Global.Context['__global'] = extContext)
89 | Object.keys(models).forEach((name) => {
90 | const model = models[name]
91 | if (model.__ERROR__) {
92 | // Fallback State and Actions when model schema is invalid
93 | console.error(name + " model's schema is invalid")
94 | Global.State = produce(Global.State, (s) => {
95 | s[name] = {}
96 | })
97 | Global.Actions[name] = {}
98 | return
99 | }
100 | if (!isAPI(model)) {
101 | if (initialState && initialState.__FROM_SERVER__) {
102 | Global.State = produce(Global.State, (s) => {
103 | s[name] = { ...model.state, ...initialState[name] }
104 | })
105 | } else if (!Global.State[name]) {
106 | Global.State = produce(Global.State, (s) => {
107 | s[name] = model.state
108 | })
109 | }
110 | if (model.middlewares) {
111 | Global.Middlewares[name] = model.middlewares
112 | }
113 | Global.Actions[name] = model.actions
114 | Global.AsyncState[name] = model.asyncState
115 | } else {
116 | // If you develop on SSR mode, hot reload will still keep the old Global reference, so initialState won't change unless you restart the dev server
117 | if (!Global.State[name] || !initialState) {
118 | Global.State = produce(Global.State, (s) => {
119 | s[name] = s[model.__id]
120 | })
121 | }
122 | if (initialState && initialState.__FROM_SERVER__) {
123 | Global.State = produce(Global.State, (s) => {
124 | s[name] = { ...s[model.__id], ...initialState[name] }
125 | })
126 | }
127 | Global.Actions[name] = Global.Actions[model.__id]
128 | Global.AsyncState[name] = Global.AsyncState[model.__id]
129 | Global.Middlewares[name] = Global.Middlewares[model.__id]
130 | Global.Context[name] = Global.Context[model.__id]
131 | }
132 | })
133 |
134 | const actions = Object.keys(models).reduce(
135 | (o, modelName) => ({ ...o, [modelName]: getActions(modelName) }),
136 | {}
137 | )
138 |
139 | Global.withDevTools =
140 | typeof window !== 'undefined' &&
141 | (window as any).__REDUX_DEVTOOLS_EXTENSION__
142 | if (Global.withDevTools) {
143 | Global.devTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__
144 | Global.devTools.connect()
145 | }
146 | return {
147 | actions,
148 | getActions,
149 | getInitialState,
150 | getState,
151 | subscribe,
152 | unsubscribe,
153 | useStore
154 | } as APIs
155 | }
156 | }
157 |
158 | const unsubscribe = (modelName: string, actions: string | string[]) => {
159 | subscribe(modelName, actions, undefined)
160 | }
161 |
162 | const subscribe = (
163 | modelName: string,
164 | actions: string | string[],
165 | callback?: () => void
166 | ) => {
167 | if (Array.isArray(actions)) {
168 | actions.forEach((actionName) => {
169 | if (!Global.subscriptions[`${modelName}_${actionName}`]) {
170 | Global.subscriptions[`${modelName}_${actionName}`] = []
171 | }
172 | if (callback) {
173 | Global.subscriptions[`${modelName}_${actionName}`].push(callback)
174 | } else {
175 | Global.subscriptions[`${modelName}_${actionName}`] = []
176 | }
177 | })
178 | } else {
179 | if (!Global.subscriptions[`${modelName}_${actions}`]) {
180 | Global.subscriptions[`${modelName}_${actions}`] = []
181 | }
182 | if (callback) {
183 | Global.subscriptions[`${modelName}_${actions}`].push(callback)
184 | } else {
185 | Global.subscriptions[`${modelName}_${actions}`] = []
186 | }
187 | }
188 | }
189 |
190 | const getState = (modelName: keyof typeof Global.State) => {
191 | return Global.State[modelName]
192 | }
193 |
194 | const getActions = (
195 | modelName: string,
196 | baseContext: Partial = { type: 'outer' }
197 | ) => {
198 | const updaters: any = {}
199 | Object.keys(Global.Actions[modelName]).forEach(
200 | (key) =>
201 | (updaters[key] = async (params: any, middlewareConfig?: any) => {
202 | const context: InnerContext = {
203 | action: Global.Actions[modelName][key],
204 | actionName: key,
205 | consumerActions,
206 | middlewareConfig,
207 | modelName,
208 | newState: null,
209 | params,
210 | ...baseContext,
211 | Global
212 | }
213 | if (Global.Middlewares[modelName]) {
214 | await applyMiddlewares(Global.Middlewares[modelName], context)
215 | } else {
216 | await applyMiddlewares(actionMiddlewares, context)
217 | }
218 | })
219 | )
220 | return updaters
221 | }
222 |
223 | const useStore = (modelName: string, selector?: Function) => {
224 | const setState = useState({})[1]
225 | const hash = useRef('')
226 |
227 | useEffect(() => {
228 | Global.uid += 1
229 | const local_hash = '' + Global.uid
230 | hash.current = local_hash
231 | if (!Global.Setter.functionSetter[modelName]) {
232 | Global.Setter.functionSetter[modelName] = {}
233 | }
234 | Global.Setter.functionSetter[modelName][local_hash] = {
235 | setState,
236 | selector
237 | }
238 | return function cleanup() {
239 | delete Global.Setter.functionSetter[modelName][local_hash]
240 | }
241 | }, [])
242 |
243 | const updaters = getActions(modelName, {
244 | __hash: hash.current,
245 | type: 'function'
246 | })
247 | return [
248 | selector ? selector(getState(modelName)) : getState(modelName),
249 | updaters
250 | ]
251 | }
252 |
253 | // Class API
254 | class Provider extends PureComponent<{}, Global['State']> {
255 | state = Global.State
256 | render() {
257 | const { children } = this.props
258 | Global.Setter.classSetter = this.setState.bind(this)
259 | return (
260 |
261 | {children}
262 |
263 | )
264 | }
265 | }
266 |
267 | const connect = (
268 | modelName: string,
269 | mapState?: Function | undefined,
270 | mapActions?: Function | undefined
271 | ) => (Component: typeof React.Component | typeof PureComponent) =>
272 | class P extends PureComponent {
273 | render() {
274 | const { state: prevState = {}, actions: prevActions = {} } = this.props
275 | return (
276 |
277 | {(models) => {
278 | const { [`${modelName}`]: state } = models as any
279 | const actions = Global.Actions[modelName]
280 | return (
281 |
294 | )
295 | }}
296 |
297 | )
298 | }
299 | }
300 |
301 | export {
302 | actionMiddlewares,
303 | Model,
304 | middlewares,
305 | Provider,
306 | Consumer,
307 | connect,
308 | getState,
309 | getInitialState
310 | }
311 |
--------------------------------------------------------------------------------
/src/middlewares.ts:
--------------------------------------------------------------------------------
1 | import { getCache, setPartialState, timeout, shallowEqual } from './helper'
2 | // -- Middlewares --
3 |
4 | const config: MiddlewareConfig = {
5 | logger: {
6 | enable: false
7 | },
8 | devtools: {
9 | enable: false
10 | },
11 | tryCatch: {
12 | enable: true
13 | }
14 | }
15 |
16 | const tryCatch: Middleware = async (context, restMiddlewares) => {
17 | const { next } = context
18 | if (config.tryCatch.enable) {
19 | await next(restMiddlewares).catch((e: any) => console.log(e))
20 | } else {
21 | await next(restMiddlewares)
22 | }
23 | }
24 |
25 | const getNewState: Middleware = async (context, restMiddlewares) => {
26 | const { action, modelName, consumerActions, params, next, Global } = context
27 | context.newState =
28 | (await action(params, {
29 | actions: consumerActions(Global.Actions[modelName], { modelName }),
30 | state: Global.State[modelName],
31 | ...(Global.Context['__global'] || {}),
32 | ...(Global.Context[modelName] || {})
33 | })) || null
34 | await next(restMiddlewares)
35 | }
36 |
37 | const getNewStateWithCache = (maxTime: number = 5000): Middleware => async (
38 | context,
39 | restMiddlewares
40 | ) => {
41 | const {
42 | action,
43 | Global,
44 | modelName,
45 | consumerActions,
46 | params,
47 | next,
48 | actionName
49 | } = context
50 | context.newState =
51 | (await Promise.race([
52 | action(params, {
53 | actions: consumerActions(Global.Actions[modelName], { modelName }),
54 | state: Global.State[modelName]
55 | }),
56 | timeout(maxTime, getCache(modelName, actionName))
57 | ])) || null
58 | await next(restMiddlewares)
59 | }
60 |
61 | const setNewState: Middleware = async (context, restMiddlewares) => {
62 | const { modelName, newState, next, Global } = context
63 | if (Global.Setter.functionSetter[modelName]) {
64 | Object.keys(Global.Setter.functionSetter[modelName]).map((key) => {
65 | const setter = Global.Setter.functionSetter[modelName][key]
66 | if (setter) {
67 | if (setter.selector && !setter.selectorRef) {
68 | setter.selectorRef = setter.selector(Global.State[modelName])
69 | }
70 | }
71 | })
72 | }
73 | if (newState) {
74 | setPartialState(modelName, newState)
75 | await next(restMiddlewares)
76 | }
77 | }
78 |
79 | const stateUpdater: Middleware = async (context, restMiddlewares) => {
80 | const { modelName, next, Global, __hash } = context
81 | const setter = Global.Setter.functionSetter[modelName]
82 | if (
83 | context.type === 'function' &&
84 | __hash &&
85 | setter &&
86 | setter[__hash] &&
87 | setter[__hash].setState
88 | ) {
89 | setter[__hash].setState(Global.State[modelName])
90 | }
91 | await next(restMiddlewares)
92 | }
93 |
94 | const subscription: Middleware = async (context, restMiddlewares) => {
95 | const { modelName, actionName, next, Global } = context
96 | const subscriptions = Global.subscriptions[`${modelName}_${actionName}`]
97 | if (subscriptions) {
98 | subscriptions.forEach((callback) => {
99 | callback()
100 | })
101 | }
102 | await next(restMiddlewares)
103 | }
104 |
105 | const consoleDebugger: Middleware = async (context, restMiddlewares) => {
106 | const { Global } = context
107 |
108 | if (
109 | config.logger.enable === true ||
110 | (typeof config.logger.enable === 'function' &&
111 | config.logger.enable(context))
112 | ) {
113 | console.group(
114 | `%c ${
115 | context.modelName
116 | } State Change %c ${new Date().toLocaleTimeString()}`,
117 | 'color: gray; font-weight: lighter;',
118 | 'color: black; font-weight: bold;'
119 | )
120 | console.log(
121 | '%c Previous',
122 | `color: #9E9E9E; font-weight: bold`,
123 | Global.State[context.modelName]
124 | )
125 | console.log(
126 | '%c Action',
127 | `color: #03A9F4; font-weight: bold`,
128 | context.actionName,
129 | `payload: ${context.params}`
130 | )
131 | await context.next(restMiddlewares)
132 | console.log(
133 | '%c Next',
134 | `color: #4CAF50; font-weight: bold`,
135 | Global.State[context.modelName]
136 | )
137 | console.groupEnd()
138 | } else {
139 | await context.next(restMiddlewares)
140 | }
141 | }
142 |
143 | const devToolsListener: Middleware = async (context, restMiddlewares) => {
144 | const { Global } = context
145 | await context.next(restMiddlewares)
146 | if (Global.withDevTools && config.devtools.enable) {
147 | Global.devTools.send(
148 | `${context.modelName}_${context.actionName}`,
149 | Global.State
150 | )
151 | }
152 | }
153 |
154 | const communicator: Middleware = async (context, restMiddlewares) => {
155 | const { modelName, next, Global } = context
156 | if (Global.Setter.classSetter) {
157 | Global.Setter.classSetter(Global.State)
158 | }
159 | if (Global.Setter.functionSetter[modelName]) {
160 | Object.keys(Global.Setter.functionSetter[modelName]).map((key) => {
161 | const setter = Global.Setter.functionSetter[modelName][key]
162 | if (setter) {
163 | if (!setter.selector) {
164 | setter.setState(Global.State[modelName])
165 | } else {
166 | const newSelectorRef = setter.selector(Global.State[modelName])
167 | if (!shallowEqual(newSelectorRef, setter.selectorRef)) {
168 | setter.selectorRef = newSelectorRef
169 | setter.setState(Global.State[modelName])
170 | }
171 | }
172 | }
173 | })
174 | }
175 | await next(restMiddlewares)
176 | }
177 |
178 | const actionMiddlewares = [
179 | tryCatch,
180 | consoleDebugger,
181 | devToolsListener,
182 | getNewState,
183 | setNewState,
184 | stateUpdater,
185 | communicator,
186 | subscription
187 | ]
188 |
189 | const middlewares = {
190 | communicator,
191 | consoleDebugger,
192 | devToolsListener,
193 | getNewState,
194 | getNewStateWithCache,
195 | setNewState,
196 | stateUpdater,
197 | subscription,
198 | tryCatch,
199 | config
200 | }
201 |
202 | const applyMiddlewares = async (
203 | middlewares: Middleware[],
204 | context: BaseContext
205 | ) => {
206 | context.next = (restMiddlewares: Middleware[]) =>
207 | restMiddlewares.length > 0 &&
208 | restMiddlewares[0](context as Context, restMiddlewares.slice(1))
209 | if (middlewares.length > 0) {
210 | await middlewares[0](context as Context, middlewares.slice(1))
211 | }
212 | }
213 |
214 | export { actionMiddlewares, applyMiddlewares, middlewares }
215 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": false,
4 | "target": "es6",
5 | "allowSyntheticDefaultImports": true,
6 | "moduleResolution": "node",
7 | "outDir": "dist",
8 | "experimentalDecorators": true,
9 | "jsx": "react",
10 | "lib": ["dom", "dom.iterable", "es2017"],
11 | "noUnusedLocals": true,
12 | "noUnusedParameters": true,
13 | "preserveConstEnums": true,
14 | "removeComments": false,
15 | "sourceMap": false,
16 | "strict": true
17 | },
18 | "include": ["./src/*"],
19 | "exclude": ["node_modules", "dist"]
20 | }
21 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultSeverity": "error",
3 | "extends": ["tslint:recommended"],
4 | "jsRules": {},
5 | "rules": {
6 | "arrow-parens": false,
7 | "max-classes-per-file": false,
8 | "member-access": false,
9 | "no-console": false,
10 | "quotemark": false,
11 | "semicolon": false,
12 | "trailing-comma": false
13 | },
14 | "rulesDirectory": ["./src/"]
15 | }
16 |
--------------------------------------------------------------------------------