add salvoravida fork of react-redux and add dummy count

dai-shi · Nov 11, 2019 · fb5c61a · fb5c61a
1 parent 644f4b4
commit fb5c61a
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 8 deletions.
diff --git a/__tests__/all_spec.js b/__tests__/all_spec.js
@@ -15,11 +15,13 @@ const names = [
   'use-context-selector',
   'mobx-react-lite',
   'use-subscription',
+  'salvoravida-react-redux',
 ];
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 jest.setTimeout(15 * 1000);
-const REPEAT = 10;
+const REPEAT = 5;
+const DOUBLE = 2; // two clicks to increment one
 const NUM_COMPONENTS = 50; // defined in src/common.js
 
 names.forEach((name) => {
@@ -41,7 +43,7 @@ names.forEach((name) => {
 
     it('check1: updated properly', async () => {
       delays = [];
-      for (let loop = 0; loop < REPEAT; ++loop) {
+      for (let loop = 0; loop < REPEAT * DOUBLE; ++loop) {
         const start = Date.now();
         // click buttons three times
         await Promise.all([
@@ -52,7 +54,7 @@ names.forEach((name) => {
         delays.push(Date.now() - start);
       }
       console.log(name, delays);
-      // check if all counts become 15 = REPEAT * 3
+      // check if all counts become REPEAT * 3
       await Promise.all([...Array(NUM_COMPONENTS).keys()].map(async (i) => {
         await expect(page).toMatchElement(`.count:nth-of-type(${i + 1})`, {
           text: `${REPEAT * 3}`,
@@ -81,8 +83,11 @@ names.forEach((name) => {
         page.click('#remoteIncrement'),
         page.click('#remoteIncrement'),
         page.click('#localIncrement'),
+        page.click('#remoteIncrement'),
+        page.click('#remoteIncrement'),
+        page.click('#localIncrement'),
       ]);
-      // check if all counts become 18 = REPEAT * 3 + 3
+      // check if all counts become REPEAT * 3 + 2
       await Promise.all([...Array(NUM_COMPONENTS).keys()].map(async (i) => {
         await expect(page).toMatchElement(`.count:nth-of-type(${i + 1})`, {
           text: `${REPEAT * 3 + 2}`,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "build:use-context-selector": "NAME=use-context-selector webpack",
     "build:mobx-react-lite": "NAME=mobx-react-lite webpack",
     "build:use-subscription": "NAME=use-subscription webpack",
+    "build:salvoravida-react-redux": "NAME=salvoravida-react-redux webpack",
     "build-all": "run-s build:*"
   },
   "keywords": [
@@ -35,6 +36,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@salvoravida/react-redux": "^7.1.6",
     "constate": "^1.3.2",
     "mobx": "^5.15.0",
     "mobx-react-lite": "^2.0.0-alpha.2",

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
   </head>
   <body>
     <p>This is a button to trigger action from outside of React</p>
-    <button id="remoteIncrement">Increment remote count</button>
+    <button id="remoteIncrement">Increment remote count (two clicks to increment one)</button>
     <div id="app"></div>
   </body>
 </html>
diff --git a/src/common.js b/src/common.js
@@ -18,12 +18,20 @@ export const useRegisterIncrementDispatcher = (listener) => {
   }, [listener]);
 };
 
-export const initialState = { count: 0 };
+export const initialState = {
+  count: 0,
+  dummy: 0,
+};
 
 export const reducer = (state = initialState, action) => {
   switch (action.type) {
     case 'increment':
-      return { ...state, count: state.count + 1 };
+      return {
+        ...state,
+        dummy: state.dummy + 1,
+        // only update once in two
+        count: state.dummy % 2 === 1 ? state.count + 1 : state.count,
+      };
     default:
       return state;
   }

diff --git a/src/mobx-react-lite/index.js b/src/mobx-react-lite/index.js
@@ -25,7 +25,10 @@ const Main = () => {
   const store = useContext(Ctx);
   useCheckTearing();
   useRegisterIncrementDispatcher(React.useCallback(() => {
-    store.count += 1;
+    store.dummy += 1;
+    if (store.dummy % 2 === 1) {
+      store.count += 1;
+    }
   }, [store]));
   const [localCount, localIncrement] = React.useReducer(c => c + 1, 0);
   return useObserver(() => {

diff --git a/src/salvoravida-react-redux/index.js b/src/salvoravida-react-redux/index.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { createStore } from 'redux';
+import { Provider, useSelector, useDispatch } from '@salvoravida/react-redux';
+
+import {
+  syncBlock,
+  useRegisterIncrementDispatcher,
+  reducer,
+  ids,
+  useCheckTearing,
+  shallowEqual,
+} from '../common';
+
+const store = createStore(reducer);
+
+const Counter = React.memo(() => {
+  const count = useSelector(state => state.count);
+  syncBlock();
+  return <div className="count">{count}</div>;
+}, shallowEqual);
+
+const Main = () => {
+  const dispatch = useDispatch();
+  const count = useSelector(state => state.count);
+  useCheckTearing();
+  useRegisterIncrementDispatcher(React.useCallback(() => {
+    dispatch({ type: 'increment' });
+  }, [dispatch]));
+  const [localCount, localIncrement] = React.useReducer(c => c + 1, 0);
+  return (
+    <div>
+      <h1>Remote Count</h1>
+      {ids.map(id => <Counter key={id} />)}
+      <div className="count">{count}</div>
+      <h1>Local Count</h1>
+      {localCount}
+      <button type="button" id="localIncrement" onClick={localIncrement}>Increment local count</button>
+    </div>
+  );
+};
+
+const App = () => (
+  <Provider store={store}>
+    <Main />
+  </Provider>
+);
+
+export default App;