feat: useSelector dynamic debugValue

Author: acrazing

examples/TodoMVC/src/App.tsx

@@ -15,6 +15,7 @@ import { currentUserIdBox } from './store/user.boxes';
 export const App = memo(() => {
   const userId = useSelector(currentUserIdBox);
   const [, gate] = useQuery(hydrate([currentUserIdBox]));
+
   if (gate.isPending()) {
     return <div>Loading...</div>;
   }

examples/TodoMVC/src/components/SignIn.tsx

@@ -3,14 +3,16 @@
  * @author junbao <[email protected]>
  */
 
-import { useDispatch, useSelector } from 'amos/react';
-import { memo, useState } from 'react';
+import { hydrate } from 'amos';
+import { useDispatch, useQuery, useSelector } from 'amos/react';
+import { Fragment, memo, useState } from 'react';
 import { signIn } from '../store/user.actions';
 import { userMapBox } from '../store/user.boxes';
 
 export const SignIn = memo(() => {
   const [input, setInput] = useState('');
   const dispatch = useDispatch();
+  useQuery(hydrate([userMapBox]));
   const userMap = useSelector(userMapBox);
   return (
     <div className="sign-in">
@@ -25,12 +27,10 @@ export const SignIn = memo(() => {
           <br />
           <span>Users:&nbsp;</span>
           {Array.from(userMap.values(), (u) => (
-            <>
-              <button key={u.id} onClick={() => dispatch(signIn(u.name))}>
-                {u.name}
-              </button>
+            <Fragment key={u.id}>
+              <button onClick={() => dispatch(signIn(u.name))}>{u.name}</button>
               &nbsp;
-            </>
+            </Fragment>
           ))}
         </div>
       )}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@amos/root",
   "private": true,
-  "version": "0.3.0-beta.27",
+  "version": "0.3.0-beta.30",
   "license": "MIT",
   "workspaces": [
     "packages/*",

packages/amos-babel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amos-babel",
-  "version": "0.3.0-beta.27",
+  "version": "0.3.0-beta.30",
   "private": true,
   "files": [],
   "peerDependencies": {

packages/amos-boxes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amos-boxes",
-  "version": "0.3.0-beta.27",
+  "version": "0.3.0-beta.30",
   "private": true,
   "files": []
 }

packages/amos-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amos-core",
-  "version": "0.3.0-beta.27",
+  "version": "0.3.0-beta.30",
   "private": true,
   "files": []
 }

packages/amos-core/src/action.spec.ts

@@ -4,12 +4,16 @@
  */
 
 import { addFourfoldAsync, addTwiceAsync } from 'amos-testing';
+import { $amos } from 'amos-utils';
 import { createStore } from './store';
 
 describe('action', () => {
   it('should create action factory', () => {
     expect(addTwiceAsync).toBeInstanceOf(Function);
     expect({ ...addTwiceAsync }).toEqual({
+      [$amos]: 'action_factory',
+      id: addTwiceAsync(1).id,
+      key: addTwiceAsync(1).id,
       type: 'amos/addTwiceAsync',
       select: expect.any(Function),
     });
@@ -18,6 +22,9 @@ describe('action', () => {
     const a1 = addFourfoldAsync(1);
     const a2 = addFourfoldAsync(2);
     expect(a2).toEqual({
+      [$amos]: 'action',
+      id: a1.id,
+      key: a1.key,
       type: 'amos/addFourfoldAsync',
       conflictPolicy: 'always',
       conflictKey: void 0,