Experiment: Redux with useMutableSource

Author: dai-shi

__tests__/all_spec.js

@@ -3,22 +3,23 @@
 const port = process.env.PORT || '8080';
 
 const names = [
-  'react-redux',
-  'reactive-react-redux',
-  'react-tracked',
-  'constate',
-  'zustand',
-  'react-sweet-state',
-  'storeon',
-  'react-hooks-global-state-1',
-  'react-hooks-global-state-2',
-  'use-context-selector',
-  'mobx-react-lite',
-  'use-subscription',
-  'mobx-use-sub',
-  'react-state',
-  'simplux',
-  'react-apollo',
+  // 'react-redux',
+  'redux-use-mutable-source',
+  // 'reactive-react-redux',
+  // 'react-tracked',
+  // 'constate',
+  // 'zustand',
+  // 'react-sweet-state',
+  // 'storeon',
+  // 'react-hooks-global-state-1',
+  // 'react-hooks-global-state-2',
+  // 'use-context-selector',
+  // 'mobx-react-lite',
+  // 'use-subscription',
+  // 'mobx-use-sub',
+  // 'react-state',
+  // 'simplux',
+  // 'react-apollo',
 ];
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

package.json

@@ -15,6 +15,7 @@
     "dev-server": "cross-env PORT=8080 webpack-dev-server",
     "http-server": "cross-env PORT=8080 http-server dist",
     "build:react-redux": "cross-env NAME=react-redux webpack",
+    "build:redux-use-mutable-source": "cross-env NAME=redux-use-mutable-source webpack",
     "build:reactive-react-redux": "cross-env NAME=reactive-react-redux webpack",
     "build:react-tracked": "cross-env NAME=react-tracked webpack",
     "build:constate": "cross-env NAME=constate webpack",

src/redux-use-mutable-source/index.js

@@ -0,0 +1,92 @@
+import React, {
+  useTransition,
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  createMutableSource,
+  useMutableSource,
+} from 'react';
+import { createStore } from 'redux';
+
+import {
+  syncBlock,
+  useRegisterIncrementDispatcher,
+  reducer,
+  ids,
+  useCheckTearing,
+} from '../common';
+
+const StoreContext = createContext();
+const subscribe = (store, callback) => store.subscribe(callback);
+const Provider = ({ store, children }) => {
+  const contextValue = useMemo(() => ({
+    source: createMutableSource(store, () => store.getState()),
+    dispatch: store.dispatch,
+  }), [store]);
+  return (
+    <StoreContext.Provider value={contextValue}>
+      {children}
+    </StoreContext.Provider>
+  );
+};
+const useDispatch = () => useContext(StoreContext).dispatch;
+const useSelector = (selector) => {
+  const selectorRef = useRef(selector);
+  useLayoutEffect(() => {
+    selectorRef.current = selector;
+  });
+  const getSnapshot = useCallback((store) => selectorRef.current(store.getState()), []);
+  const { source } = useContext(StoreContext);
+  return useMutableSource(source, getSnapshot, subscribe);
+};
+
+const store = createStore(reducer);
+
+const Counter = React.memo(() => {
+  const count = useSelector((state) => state.count);
+  syncBlock();
+  return <div className="count">{count}</div>;
+}, () => true);
+
+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);
+  const normalIncrement = () => {
+    dispatch({ type: 'increment' });
+  };
+  const [startTransition, isPending] = useTransition();
+  const transitionIncrement = () => {
+    startTransition(() => {
+      dispatch({ type: 'increment' });
+    });
+  };
+  return (
+    <div>
+      <button type="button" id="normalIncrement" onClick={normalIncrement}>Increment shared count normally (two clicks to increment one)</button>
+      <button type="button" id="transitionIncrement" onClick={transitionIncrement}>Increment shared count in transition (two clicks to increment one)</button>
+      <span id="pending">{isPending && 'Pending...'}</span>
+      <h1>Shared 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;