## v4.5.4 2022-05-25

* [revert] rollback to 4.3.1

Author: wangyi

docs/changes.md

@@ -94,19 +94,11 @@
 
 * [design] add the param defaultModel for API [useModel](/api?id=usemodel)
 
-## v4.5.0 2022-05-23
+## ~~v4.5.0 to v4.5.3~~
 
-* [update] use [email protected] auto connect feature. And resolve the problem about `weakSharing` switch between two Components can not lead reset.
+* [deprecated] These versions are not reasonable for trying to make switch of several components with same `weakSharing` model synchronously. The react effects always work by a global updating, not only work for a special component. Consider that, we make a decision to rollback to `4.3.1`.
 
-## v4.5.1 2022-05-23
+## v4.5.4 2022-05-25
 
-* [optimize] use the feature of agent-reducer connecting update.
-
-## v4.5.2 2022-05-24
-
-* [bug] resolve the problem about switch `weakSharing` usages, the cache is still remains.
-
-## v4.5.3 2022-05-24
-
-* [update] update version with `agent-reducer`.
+* [revert] rollback to 4.3.1
 

docs/zh/changes.md

@@ -94,18 +94,10 @@
 
 * [新增] 为 API [useModel](/zh/api?id=usemodel) 添加第二个参数 defaultModel。
 
-## v4.5.0 2022-05-23
+## ~~v4.5.0 to v4.5.3~~
 
-* [update] 使用 [email protected] auto connect 特性。并修复使用同一 `weakSharing` 弱共享组件，互切时，无法清理模型状态的问题
+* [deprecated] 这些版本考虑了 effect 的运行时机，这是非常不合理的，react effect 并非生命周期。每个 effect 都是对一次全量更新做出的反应，是单个组件对一次全量更新副作用的汇总项，而非针对单个组件。为此，我们决定维持 4.3.1 以及之前版本的正确理解方案，做出回滚操作。
 
-## v4.5.1 2022-05-23
+## v4.5.4 2022-05-25
 
-* [optimize] 使用 agent-reducer 自动 connect 同步更新功能
-
-## v4.5.2 2022-05-24
-
-* [bug] 修复切换 `weakSharing` 共享组件时，state 依然留存的问题。
-
-## v4.5.3 2022-05-24
-
-* [update] 跟随 `agent-reducer` 版本。
+* [revert] 回滚至 4.3.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-agent-reducer",
-  "version": "4.5.3",
+  "version": "4.5.4",
   "main": "dist/use-agent-reducer.mini.js",
   "module": "esm/use-agent-reducer.js",
   "typings": "index.d.ts",
@@ -43,7 +43,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "agent-reducer": ">=4.5.3"
+    "agent-reducer": ">=4.5.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",
@@ -88,7 +88,7 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.7.0",
-    "agent-reducer": "4.5.3",
+    "agent-reducer": "4.5.4",
     "ts-jest": "^24.0.2",
     "ts-loader": "^6.0.4",
     "tsconfig-paths-webpack-plugin": "^3.2.0",

src/index.ts

@@ -3,10 +3,9 @@ import React, {
   memo, NamedExoticComponent, ReactNode,
   useContext,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useReducer,
-  useRef, useState,
+  useRef,
 } from 'react';
 import {
   create,
@@ -15,6 +14,7 @@ import {
   LifecycleMiddleWare,
   Action,
   AgentReducer,
+  DefaultActionType,
   Model,
   weakSharing,
   Factory,
@@ -31,34 +31,34 @@ export function useAgentReducer<T extends Model<S>, S>(
   entry: T | { new(): T },
   ...mdws: MiddleWare[]
 ): T {
-  const [version, setVersion] = useState(0);
   const reducerRef = useRef<null | AgentReducer<S, T>>(null);
 
   const initialed = reducerRef.current !== null;
 
   if (!initialed) {
-    const reducerFn = create<S, T>(entry, ...mdws);
-    reducerRef.current = reducerFn;
-    reducerFn.recreate(() => {
-      reducerFn.disconnect();
-      reducerRef.current = null;
-      setVersion((v) => v + 1);
-    });
+    reducerRef.current = create(entry, ...mdws);
   }
 
   const reducer = reducerRef.current as Reducer<S, Action>&ReducerPadding<S, T>;
 
-  const [, dispatch] = useReducer(reducer, reducer.agent.state);
+  const [state, dispatch] = useReducer(reducer, reducer.agent.state);
 
   const dispatcher = (action:Action) => {
     dispatch({ ...action, state: reducer.agent.state });
   };
 
-  useLayoutEffect(
+  if (!initialed) {
+    reducer.connect(dispatcher);
+  }
+
+  useEffect(
     () => {
       if (reducer) {
         reducer.connect(dispatcher);
       }
+      if (reducer.agent.state !== state) {
+        dispatcher({ type: DefaultActionType.DX_MUTE_STATE, state: reducer.agent.state });
+      }
       return () => {
         const { current: red } = reducerRef;
         if (!red) {
@@ -67,7 +67,7 @@ export function useAgentReducer<T extends Model<S>, S>(
         red.disconnect();
       };
     },
-    [version],
+    [],
   );
 
   return reducer.agent;
@@ -86,20 +86,12 @@ export function useAgentSelector<T extends Model<S>, S, R>(
   mapStateCallback: (state: T['state']) => R,
   equalityFn?: (prev: R, current: R) => boolean,
 ): R {
-  const [version, setVersion] = useState(0);
-
   const reducerRef = useRef<null | AgentReducer<S, T>>(null);
 
   const initialed = reducerRef.current !== null;
 
   if (!initialed) {
-    const reducerFn = create<S, T>(entry);
-    reducerRef.current = reducerFn;
-    reducerFn.recreate(() => {
-      reducerFn.disconnect();
-      reducerRef.current = null;
-      setVersion((v) => v + 1);
-    });
+    reducerRef.current = create(entry);
   }
 
   const reducer = reducerRef.current as Reducer<S, Action>&ReducerPadding<S, T>;
@@ -125,11 +117,16 @@ export function useAgentSelector<T extends Model<S>, S, R>(
     dispatchRef.current(action);
   };
 
-  useLayoutEffect(
+  if (!initialed) {
+    reducer.connect(dispatchWrap);
+  }
+
+  useEffect(
     () => {
       if (reducer) {
         reducer.connect(dispatchWrap);
       }
+      dispatchRef.current({ type: DefaultActionType.DX_MUTE_STATE, state: reducer.agent.state });
       return () => {
         const { current: red } = reducerRef;
         if (!red) {
@@ -138,7 +135,7 @@ export function useAgentSelector<T extends Model<S>, S, R>(
         red.disconnect();
       };
     },
-    [version],
+    [],
   );
 
   return current;
@@ -148,25 +145,21 @@ export function useAgentMethods<T extends Model<S>, S>(
   entry: T,
   ...middleWares: MiddleWare[]
 ): Omit<T, 'state'> {
-  const [version, setVersion] = useState(0);
-
   const reducerRef = useRef<null | AgentReducer<S, T>>(null);
 
   const initialed = reducerRef.current !== null;
 
   if (!initialed) {
-    const reducerFn = create<S, T>(entry, ...middleWares);
-    reducerRef.current = reducerFn;
-    reducerFn.recreate(() => {
-      reducerFn.disconnect();
-      reducerRef.current = null;
-      setVersion((v) => v + 1);
-    });
+    reducerRef.current = create(entry, ...middleWares);
   }
 
   const reducer = reducerRef.current as Reducer<S, Action>&ReducerPadding<S, T>;
 
-  useLayoutEffect(
+  if (!initialed) {
+    reducer.connect();
+  }
+
+  useEffect(
     () => {
       if (reducer) {
         reducer.connect();
@@ -179,7 +172,7 @@ export function useAgentMethods<T extends Model<S>, S>(
         red.disconnect();
       };
     },
-    [version],
+    [],
   );
 
   return reducer.agent;