Add more reducers

Author: RoyalIcing

lib/components_guide_web/templates/react_typescript/logical-clocks.html.md

@@ -16,7 +16,7 @@ We can implement once as a React hook using `useReducer()`:
 
 ```ts
 function useTicker() {
-  return useReducer(n => n + 1, 0);
+  return useReducer(t => t + 1, 0);
 }
 ```
 
@@ -27,7 +27,7 @@ const [count, advance] = useTicker();
 
 return <>
   <p>You have clicked {count} times</p>
-  <button>Click me!</button>
+  <button onClick={advance}>Click me!</button>
 </>;
 ```
 

lib/components_guide_web/templates/react_typescript/reducer-patterns.html.md

@@ -4,19 +4,33 @@
 
 ```js
 const [isEnabled, enable] = useReducer(() => true, false);
+
+isEnabled; // false
+enable();
+isEnabled; // true
+enable();
+isEnabled; // true
 ```
 
 [Source](https://twitter.com/markdalgleish/status/1521304112738217984)
 
 ## Toggle Flag
 
 ```js
-const [on, toggle] = useReducer(flag => !flag, false)
+const [on, toggle] = useReducer(flag => !flag, false);
+
+on; // false
+toggle();
+on; // true
+toggle();
+on; // false
+toggle();
+on; // true
 ```
 
 [Source](https://twitter.com/FernandoTheRojo/status/1521305729558274048)
 
-## Menu
+## Menu or Exclusive Value
 
 ```ts
 type Menu = null | "file" | "edit" | "view"; // null means closed
@@ -32,16 +46,26 @@ const [openMenu, tap] = useReducer(
   null
 );
 
-tap("file") // "file"
-tap(null) // null
-tap("file") // "file"
-tap("file") // null
-tap("file") // "file"
-tap("edit") // "edit"
-tap("view") // "view"
-tap("edit") // "edit"
-tap("edit") // null
-tap(null) // null
+tap("file");
+openMenu; // "file"
+tap(null);
+openMenu; // null
+tap("file");
+openMenu; // "file"
+tap("file");
+openMenu; // null
+tap("file");
+openMenu; // "file"
+tap("edit");
+openMenu; // "edit"
+tap("view");
+openMenu; // "view"
+tap("edit");
+openMenu; // "edit"
+tap("edit");
+openMenu; // null
+tap(null);
+openMenu; // null
 ```
 
 You can of course condense it to a ternary if you want:
@@ -53,3 +77,61 @@ const [openMenu, tap] = useReducer(
   null
 );
 ```
+
+## Logical Clock
+
+```js
+const [t, tick] = useReducer(n => n + 1, 0);
+
+t; // 0
+tick();
+t; // 1
+tick();
+t; // 2
+tick();
+t; // 3
+```
+
+----
+
+## Lamport Timestamp
+
+```js
+const [{ t, toSend }, dispatch] = useReducer((state, command) => {
+  if (command.type === "send") {
+    const t = state.t + 1;
+    return {
+      t,
+      toSend: {
+        t,
+        message: command.message
+      }
+    };
+  } else if (command.type === "receive") {
+    const t = Math.max(state.t, command.t) + 1;
+    return {
+      t,
+      toSend: null
+    };
+  } else {
+    return {
+      t: state.t,
+      toSend: null
+    };
+  }
+}, { t: 0, toSend: null });
+useEffect(() => {
+  if (toSend !== null) {
+    send(toSend.message, toSend.t); // Second argument can be used for idempotency
+  }
+}, [toSend]);
+
+t; // 0
+toSend; // null
+dispatch({ type: "send", message: "hello" });
+t; // 1
+toSend; // { t: 1, message: "hello" }
+dispatch({ type: "receive", t: 3, message: "howdy" });
+t; // 4
+toSend; // null
+```