@chhsiao1981/use-thunk 9.0.5 → 10.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Chuan-Heng Hsiao
+Copyright (c) 2026 Chuan-Heng Hsiao
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -6,7 +6,7 @@ A framework easily using `useThunk` to manage the data-state.
 
 Adopted concept of [redux-thunk](https://redux.js.org/usage/writing-logic-thunks) and [redux-duck](https://github.com/PlatziDev/redux-duck)
 
-[src/thunk-reducer.ts](src/thunkReducer.ts) is adopted from [nathanbuchar/react-hook-thunk-reducer](https://github.com/nathanbuchar/react-hook-thunk-reducer/blob/master/src/thunk-reducer.js).
+[src/useThunkReducer.ts](src/useThunkReducer.ts) is adopted from [nathanbuchar/react-hook-thunk-reducer](https://github.com/nathanbuchar/react-hook-thunk-reducer/blob/master/src/thunk-reducer.js).
 
 `use-thunk` is with the following additional features:
 
@@ -15,8 +15,11 @@ Adopted concept of [redux-thunk](https://redux.js.org/usage/writing-logic-thunks
 
 Please check [docs/00-introduction.md](docs/00-introduction.md) for more information.
 
+Please check [demo-use-thunk](https://github.com/chhsiao1981/demo-use-thunk) for a demo to use Thunk.
+
 ### Breaking Changes
 
+* Starting from `10.0.0`: The ClassState is shared globally, with `registerThunk` and `ThunkContext`.
 * Starting from `9.0.0`: npm package is renamed as [@chhsiao1981/use-thunk](https://www.npmjs.com/package/%40chhsiao1981/use-thunk)
 * Starting from `8.0.0`: [Totally renamed as `useThunk`](https://github.com/chhsiao1981/use-thunk/issues/105).
 
@@ -29,7 +32,7 @@ Please check [docs/00-introduction.md](docs/00-introduction.md) for more informa
 Thunk module able to do increment (reducers/increment.ts):
 
 ```ts
-import { init as _init, setData, createReducer, Thunk, getState, type State as rState, genUUID } from '@chhsiao1981/use-thunk'
+import { init as _init, setData, Thunk, getState, type State as rState, genUUID } from '@chhsiao1981/use-thunk'
 
 export const myClass = 'demo/Increment'
 
@@ -73,20 +76,18 @@ type Props = {
 }
 
 export default (props: Props) => {
-  const [stateIncrement, doIncrement] = useThunk<DoIncrement.State, TDoIncrement>(DoIncrement, StateType.LOCAL)
+  const [classStateIncrement, doIncrement] = useThunk<DoIncrement.State, TDoIncrement>(DoIncrement, StateType.LOCAL)
 
   //init
   useEffect(() => {
     doIncrement.init()
   }, [])
 
-  // to render
-  const incrementID = getRootID(stateIncrement)
-  const increment = getState(stateIncrement)
-  if(!increment) {
-    return (<div styles={{display: 'none'}}></div>)
-  }
+  // states
+  const incrementID = getRootID(classStateIncrement)
+  const increment = getState(classStateIncrement) || DoIncrement.defaultState
 
+  // to render
   return (
     <div>
       <p>count: {increment.count}</p>
@@ -96,6 +97,25 @@ export default (props: Props) => {
 }
 ```
 
+main.tsx:
+```tsx
+import { registerThunk, ThunkContext } from "@chhsiao1981/use-thunk";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import * as DoIncrement from './reducers/increment'
+import App from "./App.tsx";
+
+registerThunk(DoIncrement)
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThunkContext>
+      <App />
+    </ThunkContext>
+  </StrictMode>,
+)
+```
+
 ### Must Included in a Thunk Module
 
 ```ts
@@ -133,29 +153,36 @@ const Component = () => {
 }
 ```
 
+### Must Included in main.tsx
+
+```tsx
+registerThunk(...)
+.
+.
+.
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThunkContext>
+      <App />
+    </ThunkContext>
+  </StrictMode>,
+)
+```
+
 ## Normalized State
 
 The general concept of normalized state can be found in [Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape)
 with the following features:
 
 1. ClassState: the state of the class, including the nodes and the root of the class.
-2. NodeState: the state of a node, including the id, children, parent, links of the node, and the content (state) of the node.
+2. NodeState: the state of a node, including the id of the node and the content (state) of the node.
 3. State: the content of the node, represented as a state.
-4. The concept of "parent" and "children" and "links" is embedded in the NodeState.
-    * remove (me):
-        - initiate "remove" for all the children.
-        - remove from the parent.
-        - remove from all the links.
-    * remove child:
-        - the child initiate "remove".
-    * remove link:
-        - the link initiate "remove link" on me.
-4. To avoid complication, currently there is only 1 parent.
 
 For example, the example [in the redux link](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape) is represented as:
 
 ```ts
-statePost = {
+classStatePost = {
   myClass: 'post',
   doMe: (DispatchedAction<Post>),
   nodes: {
@@ -164,33 +191,15 @@ statePost = {
       state: {
         author : uuid-user1,
         body : "......",
+        comments: [uuid-comment1, uuid-comment2]
       },
-      _parent: {
-        id: uuid-user1,
-        do: doUser
-      },
-      _links: {
-        comment : {
-          list: [uuid-comment1, uuid-comment2],
-          do: doComment
-        }
-      }
     },
     [uuid-post2] : {
       id : uuid-post2,
       state: {
         author : uuid-user2,
         body : "......",
-      },
-      _parent: {
-        id: uuid-user2,
-        do: doUser
-      },
-      _links: {
-        comment : {
-          list: [uuid-comment3, uuid-comment4, uuid-comment5],
-          do: doComment
-        }
+        comments: [uuid-comment3, uuid-comment4, uuid-comment5]
       }
     }
   }
@@ -200,7 +209,7 @@ statePost = {
 and:
 
 ```ts
-stateComment = {
+classStateComment = {
   myClass: 'comment',
   doMe: (DispatchedAction<Comment>),
   nodes: {
@@ -209,16 +218,6 @@ stateComment = {
       state: {
         author : uuid-user2,
         comment : ".....",
-      },
-      _parent: {
-        id: uuid-user2,
-        do: doUser
-      },
-      _links: {
-        post: {
-          list: [uuid-post1],
-          do: doPost
-        }
       }
     },
     [uuid-comment2] : {
@@ -226,16 +225,6 @@ stateComment = {
       state: {
         author : uuid-user3,
         comment : ".....",
-      },
-      _parent: {
-        id: uuid-user3,
-        do: doUser
-      },
-      _links: {
-        post: {
-          list: [uuid-post1],
-          do: doPost
-        }
       }
     },
     [uuid-comment3] : {
@@ -243,16 +232,6 @@ stateComment = {
       state: {
         author : uuid-user3,
         comment : ".....",
-      },
-      _parent: {
-        id: uuid-user3,
-        do: doUser
-      },
-      _links: {
-        post: {
-          list: [uuid-post2],
-          do: doPost
-        }
       }
     },
     [uuid-comment4] : {
@@ -260,16 +239,6 @@ stateComment = {
       state: {
         author : uuid-user1,
         comment : ".....",
-      },
-      _parent: {
-        id: uuid-user1,
-        do: doUser
-      },
-      _links: {
-        post: {
-          list: [uuid-post2],
-          do: doPost
-        }
       }
     },
     [uuid-comment5] : {
@@ -277,25 +246,15 @@ stateComment = {
       state: {
         author : uuid-user3,
         comment : ".....",
-      },
-      _parent: {
-        id: uuid-user3,
-        do: doUser
-      },
-      _links: {
-        post: {
-          list: [uuid-post2],
-          do: doPost
-        }
       }
-    },
+    }
   }
 }
 ```
 
 and:
 ```ts
-stateUser = {
+classStateUser = {
   myClass: 'user',
   doMe: (DispatchedAction<User>),
   nodes: {
@@ -304,16 +263,6 @@ stateUser = {
       state: {
         username : "user1",
         name : "User 1",
-      },
-      _children: {
-        post: {
-          list: [uuid-post1],
-          do: doPost,
-        },
-        comment: {
-          list: [uuid-comment4],
-          do: doComment,
-        }
       }
     },
     [uuid-user2] : {
@@ -321,16 +270,6 @@ stateUser = {
       state: {
         username : "user2",
         name : "User 2",
-      },
-      _children: {
-        post: {
-          list: [uuid-post2],
-          do: doPost,
-        },
-        comment: {
-          list: [uuid-comment1],
-          do: doComment,
-        }
       }
     },
     [uuid-user3] : {
@@ -338,16 +277,6 @@ stateUser = {
       state: {
         username : "user3",
         name : "User 3",
-      },
-      _children: {
-        post: {
-          list: [uuid-post1],
-          do: doPost,
-        },
-        comment: {
-          list: [uuid-comment2, uuid-comment3, uuid-comment5],
-          do: doComment,
-        }
       }
     }
   }
@@ -368,10 +297,6 @@ return: `[ClassState<S>, DispatchedAction<S>]`
 
 initializing the react-object.
 
-##### `genUUID(myuuidv4?: () => string): string`
-
-generate uuid for react-object.
-
 ##### `setData(myID, data)`
 
 set the data to myID.
@@ -380,6 +305,10 @@ set the data to myID.
 
 remove the react-object.
 
+##### `genUUID(myuuidv4?: () => string): string`
+
+generate uuid for react-object.
+
 ### State
 
 ##### `getState(state: ClassState, myID?: string): State`
@@ -392,46 +321,6 @@ get the root id.
 
 ### NodeState
 
-##### `getNode(state: ClassState, myID: string): NodeState`
-
-Get the node of `myID`. Get the node of `rootID` if `myID` is not present.s
-
-##### `getChildIDs(me: NodeState, childClass: string): string[]`
-
-get the child-ids of the childClass.
-
-##### `getChildID(me: NodeState, childClass: string): string`
-
-get the only child-id (`childIDs[0]`) of the childClass.
-
-
-##### `getLinkIDs(me: NodeState, linkClass string): string[]`
-
-get the link-ids of the linkClass.
-
-
-##### `getLinkID(me: NodeState, linkClass): string`
-
-get the only link-id (`linkIDs[0]`) of the linkClass.
-
-### Children
-
-##### `addChild(myID, child)`
-
-params:
-* child: `{id, theClass, do}`
-
-##### `removeChild(myID, childID, childClass, isFromChild=false)`
-
-remove the child (and delete the child) of `myID`.
-
-### Link
-
-##### `addLink(myID, link, isFromLink=false)`
-
-params:
-* link: `{id, theClass, do}`
-
-##### `removeLink(myID, linkID, linkClass, isFromLink=false)`
+##### `getNode(state: ClassState, myID?: string): NodeState`
 
-remove the link of `myID` (and remove the link from linkID).
+Get the node of `myID`. Get the node of `rootID` if `myID` is not present.