perf: only update when component depend effect loading

Author: chnliquan

src/core/Container.ts

@@ -1,20 +1,68 @@
 import { shallowEqual } from '../utils/shallowEqual'
-import { Subscriber } from '../types'
+import { StateSubscriber, EffectSubscriber } from '../types'
+
+type SubscribeType = 'state' | 'effect'
 
 export class Container<T> {
-  public subscribers: Subscriber<T>[] = []
+  private stateSubscribers: StateSubscriber<T>[] = []
+  private effectSubscribers: EffectSubscriber[] = []
+
+  public subscribe(type: 'state', payload: StateSubscriber<T>): void
+  public subscribe(type: 'effect', payload: EffectSubscriber): void
+  public subscribe(type: SubscribeType, payload: StateSubscriber<T> | EffectSubscriber): void {
+    if (type === 'state') {
+      const stateSubscriber = payload as StateSubscriber<T>
+
+      if (this.stateSubscribers.indexOf(stateSubscriber) === -1) {
+        this.stateSubscribers.push(stateSubscriber)
+      }
+    } else if (type === 'effect') {
+      const effectSubscriber = payload as EffectSubscriber
+
+      if (this.effectSubscribers.indexOf(effectSubscriber) === -1) {
+        this.effectSubscribers.push(effectSubscriber)
+      }
+    }
+  }
 
-  notify(payload?: T): void {
-    for (let i = 0; i < this.subscribers.length; i++) {
-      const { dispatcher, mapStateToProps, prevState } = this.subscribers[i]
+  public notify(payload?: T): void {
+    if (payload) {
+      for (let i = 0; i < this.stateSubscribers.length; i++) {
+        const { dispatcher, mapStateToProps, prevState } = this.stateSubscribers[i]
 
-      const newState = payload ? mapStateToProps(payload) : prevState
+        const newState = mapStateToProps(payload)
 
-      this.subscribers[i].prevState = newState
+        this.stateSubscribers[i].prevState = newState
 
-      if (!shallowEqual(prevState, newState)) {
+        if (!shallowEqual(prevState, newState)) {
+          dispatcher(Object.create(null))
+        }
+      }
+    } else {
+      for (let i = 0; i < this.effectSubscribers.length; i++) {
+        const dispatcher = this.effectSubscribers[i]
         dispatcher(Object.create(null))
       }
     }
   }
+
+  public unsubscribe(type: 'state', payload: StateSubscriber<T>): void
+  public unsubscribe(type: 'effect', payload: EffectSubscriber): void
+  public unsubscribe(type: SubscribeType, payload: StateSubscriber<T> | EffectSubscriber): void {
+    if (type === 'state') {
+      if (this.stateSubscribers.length === 0) {
+        return
+      }
+
+      const index = this.stateSubscribers.indexOf(payload as StateSubscriber<T>)
+      this.stateSubscribers.splice(index, 1)
+    } else if (type === 'effect') {
+      if (this.effectSubscribers.length === 0) {
+        return
+      }
+
+      const index = this.effectSubscribers.indexOf(payload as EffectSubscriber)
+      this.effectSubscribers.splice(index, 1)
+    }
+  }
 }

src/core/Model.tsx

@@ -1,10 +1,19 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, Dispatch } from 'react'
 import produce from 'immer'
-import { ConfigReducer, ContextPropsModel, MapStateToProps, ModelConfig, ModelContextProps, ModelEffect, Subscriber } from '../types'
+import { 
+  ConfigReducer, 
+  ContextPropsModel, 
+  MapStateToProps, 
+  ModelConfig, 
+  ModelConfigEffect, 
+  ModelContextProps, 
+  StateSubscriber 
+} from '../types'
 import { invariant } from '../utils/invariant'
 import { isObject } from '../utils/type'
 import { createProvider } from './createProvider'
 import { Container } from './Container'
+import { noop } from '../utils/func'
 
 interface ModelOptions<C extends ModelConfig> {
   storeName: string
@@ -20,7 +29,11 @@ export class Model<C extends ModelConfig> {
 
   private model: ContextPropsModel<C>
   private initialState: C['state']
+
   private container: Container<C['state']>
+  private currentDispatcher: Dispatch<any> = noop
+  private isInternalUpdate = false
+
   private useContext: () => ModelContextProps
 
   constructor(private options: ModelOptions<C>) {
@@ -40,12 +53,13 @@ export class Model<C extends ModelConfig> {
 
   public useModel(mapStateToProps: MapStateToProps<C['state']>): any {
     const [, dispatcher] = useState()
-    const { subscribers } = this.container
     const { model } = this.useContext()
 
-    const subscriberRef = useRef<Subscriber<C['state']>>()
+    this.currentDispatcher = dispatcher
+
+    const subscriberRef = useRef<StateSubscriber<C['state']>>()
 
-    // 组件初始化时注册监听函数，使用 useRef 保证每个组件只注册一次
+    // make sure only subscribe once
     if (!subscriberRef.current) {
       const subscriber = {
         dispatcher,
@@ -54,15 +68,14 @@ export class Model<C extends ModelConfig> {
       }
 
       subscriberRef.current = subscriber
-      subscribers.push(subscriber)
+      this.container.subscribe('state', subscriber)
     }
 
-    /* eslint-disable-next-line */
     useEffect(() => {
       return (): void => {
-        // 组件卸载时解绑监听函数
-        const index = subscribers.indexOf(subscriberRef.current!)
-        subscribers.splice(index, 1)
+        // unsubscribe when component unmount
+        this.container.unsubscribe('state', subscriberRef.current as StateSubscriber<C['state']>)
+        this.container.unsubscribe('effect', dispatcher)
       }
     }, [])
 
@@ -116,7 +129,7 @@ export class Model<C extends ModelConfig> {
       Object.create(null)
     )
 
-    // 如果用户没有定义 setValue 则内置该方法
+    // internal reducer setValue
     if (!reducers.setValue) {
       reducers.setValue = (key, value): void => {
         const newState = this.produceState(this.model.state, draft => {
@@ -128,7 +141,7 @@ export class Model<C extends ModelConfig> {
       }
     }
 
-    // 如果用户没有定义 setValues 则内置该方法
+    // internal reducer setValues
     if (!reducers.setValues) {
       reducers.setValues = (partialState): void => {
         const newState = this.produceState(this.model.state, draft => {
@@ -143,7 +156,7 @@ export class Model<C extends ModelConfig> {
       }
     }
 
-    // 如果用户没有定义 reset 则内置该方法
+    // internal reducer reset
     if (!reducers.reset) {
       reducers.reset = (key): void => {
         const newState = this.produceState(this.model.state, draft => {
@@ -168,12 +181,13 @@ export class Model<C extends ModelConfig> {
     return Object.keys(config.effects).reduce((effects, name) => {
       const originEffect = config.effects[name]
 
-      const effect: ModelEffect<typeof originEffect> = async (...payload: any): Promise<void> => {
+      const effect: ModelConfigEffect<typeof originEffect> = async (...payload: any): Promise<void> => {
         try {
           effect.identifier++
+          
+          this.isInternalUpdate = true
           effect.loading = true
-
-          this.container.notify(null)
+          this.isInternalUpdate = false
 
           const result = await originEffect(...payload)
           return result
@@ -184,14 +198,37 @@ export class Model<C extends ModelConfig> {
 
           /* istanbul ignore else */
           if (effect.identifier === 0) {
+            this.isInternalUpdate = true
             effect.loading = false
-            this.container.notify(null)
+            this.isInternalUpdate = false
           }
         }
       }
 
       effect.loading = false
       effect.identifier = 0
+
+      let value = false
+      const that = this
+
+      Object.defineProperty(effect, 'loading', {
+        configurable: false,
+        enumerable: true,
+        
+        get() {
+          that.container.subscribe('effect', that.currentDispatcher)
+          return value
+        },
+
+        set(newValue) {
+          // avoid modify effect loading out of internal
+          if(newValue !== value && that.isInternalUpdate) {
+            value = newValue
+            that.container.notify()
+          }
+        }
+      })
+
       effects[name] = effect
 
       return effects

src/types.ts

@@ -63,8 +63,7 @@ export interface Configs {
 }
 
 interface ModelEffectState {
-  loading: boolean
-  identifier: number
+  readonly loading: boolean
 }
 
 interface BuildInReducers<S = any> {
@@ -119,6 +118,13 @@ export interface ModelConfig<S = any> {
   effects: { [key: string]: ConfigEffect }
 }
 
+export type ModelConfigEffect<E extends ConfigEffect> = (E extends (...payload: infer P) => infer R
+  ? (...payload: P) => R
+  : any) & {
+  loading: boolean
+  identifier: number
+}
+
 export interface ContextPropsModel<C extends ModelConfig = any> {
   state: C['state']
   reducers: C['reducers'] extends ConfigReducers<C['state']>
@@ -147,24 +153,20 @@ export type StoreProvider<C extends Configs> = React.FC<
   React.PropsWithChildren<StoreProviderOptions<C>>
 >
 
-export interface StoreOptions<C extends Configs> {
-  name: string
-  autoReset: boolean | UnionToTuple<keyof C>
-  devTools: boolean | UnionToTuple<keyof C>
-}
-
 export type HOC<InjectProps = any> = <P>(
   Component: React.ComponentType<P & InjectProps>
 ) => React.ComponentType<P>
 
 export type Optionality<T extends K, K> = Omit<T, keyof K>
 
-export interface Subscriber<T> {
+export interface StateSubscriber<T> {
   mapStateToProps: MapStateToProps<any>
   prevState: T
   dispatcher: Dispatch<any>
 }
 
+export type EffectSubscriber = Dispatch<any>
+
 export interface MapStateToProps<M extends Model<any>, S = any> {
   (state: M['state']): S
 }