Mirgate to useMutableSource [first draft]

package.json

@@ -77,8 +77,8 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/jest-native": "^3.4.3",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/react": "file:///tmp/react.tgz",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.1.0",
     "@types/create-react-class": "^15.6.3",
     "@types/object-assign": "^4.0.30",
@@ -103,10 +103,10 @@
     "glob": "^7.1.6",
     "jest": "^26.6.1",
     "prettier": "^2.1.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "18.0.0-alpha-b9934d6db-20210805",
+    "react-dom": "18.0.0-alpha-b9934d6db-20210805",
     "react-native": "^0.64.1",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "18.0.0-alpha-b9934d6db-20210805",
     "redux": "^4.0.5",
     "rimraf": "^3.0.2",
     "rollup": "^2.32.1",

src/components/Context.ts

@@ -1,14 +1,13 @@
-import React from 'react'
+import React, { MutableSource } from 'react'
 import { Action, AnyAction, Store } from 'redux'
 import type { FixTypeLater } from '../types'
-import type { Subscription } from '../utils/Subscription'
 
 export interface ReactReduxContextValue<
   SS = FixTypeLater,
   A extends Action = AnyAction
 > {
+  storeSource: MutableSource<Store<SS, A>>
   store: Store<SS, A>
-  subscription: Subscription
 }
 
 export const ReactReduxContext =

src/components/Provider.tsx

@@ -1,7 +1,10 @@
-import React, { Context, ReactNode, useMemo } from 'react'
+import React, {
+  Context,
+  ReactNode,
+  unstable_createMutableSource as createMutableSource,
+  useMemo,
+} from 'react'
 import { ReactReduxContext, ReactReduxContextValue } from './Context'
-import { createSubscription } from '../utils/Subscription'
-import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
 import type { FixTypeLater } from '../types'
 import { Action, AnyAction, Store } from 'redux'
 
@@ -19,31 +22,18 @@ export interface ProviderProps<A extends Action = AnyAction> {
   children: ReactNode
 }
 
-function Provider({ store, context, children }: ProviderProps) {
-  const contextValue = useMemo(() => {
-    const subscription = createSubscription(store)
-    subscription.onStateChange = subscription.notifyNestedSubs
-    return {
-      store,
-      subscription,
-    }
-  }, [store])
-
-  const previousState = useMemo(() => store.getState(), [store])
-
-  useIsomorphicLayoutEffect(() => {
-    const { subscription } = contextValue
-    subscription.trySubscribe()
-
-    if (previousState !== store.getState()) {
-      subscription.notifyNestedSubs()
-    }
-    return () => {
-      subscription.tryUnsubscribe()
-      subscription.onStateChange = undefined
-    }
-  }, [contextValue, previousState])
+export function createReduxContext(store: Store) {
+  return {
+    storeSource: createMutableSource(store, () => store.getState()),
+    store,
+  }
+}
 
+function Provider({ store, context, children }: ProviderProps) {
+  const contextValue: ReactReduxContextValue = useMemo(
+    () => createReduxContext(store),
+    [store]
+  )
   const Context = context || ReactReduxContext
 
   return <Context.Provider value={contextValue}>{children}</Context.Provider>