Merge pull request #2100 from reduxjs/feature/9.0-react-native

Add an RN-specific bundle and consolidate imports

.github/workflows/test.yml

@@ -121,10 +121,6 @@ jobs:
       - name: Clone RTK repo
         run: git clone https://github.com/reduxjs/redux-toolkit.git ./redux-toolkit
 
-      - name: Check out v2.0-integration
-        working-directory: ./redux-toolkit
-        run: git checkout v2.0-integration
-
       - name: Check folder contents
         run: ls -l .
 

package.json

@@ -14,12 +14,14 @@
   "bugs": "https://github.com/reduxjs/react-redux/issues",
   "module": "dist/react-redux.legacy-esm.js",
   "main": "dist/cjs/index.js",
+  "react-native": "./dist/react-redux.react-native.mjs",
   "types": "dist/react-redux.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/react-redux.d.ts",
       "react-server": "./dist/rsc.mjs",
+      "react-native": "./dist/react-redux.react-native.mjs",
       "import": "./dist/react-redux.mjs",
       "default": "./dist/cjs/index.js"
     },
@@ -50,7 +52,7 @@
     "react": "^18.0",
     "react-dom": "^18.0",
     "react-native": ">=0.71",
-    "redux": "^5.0.0-rc"
+    "redux": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

src/alternate-renderers.ts

@@ -3,7 +3,7 @@
 // Examples include React-Three-Fiber, Ink, etc.
 // We'll assume they're built with React 18 and thus have `useSyncExternalStore` available.
 
-import * as React from 'react'
+import { React } from './utils/react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'
 
 import { initializeUseSelector } from './hooks/useSelector'

src/components/Context.ts

@@ -1,5 +1,5 @@
 import type { Context } from 'react'
-import * as React from 'react'
+import { React } from '../utils/react'
 import type { Action, Store, UnknownAction } from 'redux'
 import type { Subscription } from '../utils/Subscription'
 import type { ProviderProps } from './Provider'

src/components/Provider.tsx

@@ -1,5 +1,5 @@
 import type { Context, ReactNode } from 'react'
-import * as React from 'react'
+import { React } from '../utils/react'
 import type { Action, Store, UnknownAction } from 'redux'
 import type { DevModeCheckFrequency } from '../hooks/useSelector'
 import { createSubscription } from '../utils/Subscription'

src/components/connect.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable valid-jsdoc, @typescript-eslint/no-unused-vars */
 import type { ComponentType } from 'react'
-import * as React from 'react'
+import { React } from '../utils/react'
 import { isValidElementType, isContextConsumer } from '../utils/react-is'
 
 import type { Store } from 'redux'

src/hooks/useReduxContext.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { React } from '../utils/react'
 import { ReactReduxContext } from '../components/Context'
 import type { ReactReduxContextValue } from '../components/Context'
 

src/hooks/useSelector.ts

@@ -1,4 +1,5 @@
-import * as React from 'react'
+//import * as React from 'react'
+import { React } from '../utils/react'
 
 import type { ReactReduxContextValue } from '../components/Context'
 import { ReactReduxContext } from '../components/Context'

src/react-native.ts

@@ -0,0 +1,28 @@
+// The primary entry point assumes we are working with React 18, and thus have
+// useSyncExternalStore available. We can import that directly from React itself.
+// The useSyncExternalStoreWithSelector has to be imported, but we can use the
+// non-shim version. This shaves off the byte size of the shim.
+
+import { React } from './utils/react'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'
+
+import { unstable_batchedUpdates as batchInternal } from './utils/reactBatchedUpdates.native'
+import { setBatch } from './utils/batch'
+
+import { initializeUseSelector } from './hooks/useSelector'
+import { initializeConnect } from './components/connect'
+
+initializeUseSelector(useSyncExternalStoreWithSelector)
+initializeConnect(React.useSyncExternalStore)
+
+// Enable batched updates in our subscriptions for use
+// with standard React renderers (ReactDOM, React Native)
+setBatch(batchInternal)
+
+// Avoid needing `react-dom` in the final TS types
+// by providing a simpler type for `batch`
+const batch: (cb: () => void) => void = batchInternal
+
+export { batch }
+
+export * from './exports'

src/utils/react.ts

@@ -0,0 +1,7 @@
+import * as ReactOriginal from 'react'
+import type * as ReactNamespace from 'react'
+
+export const React: typeof ReactNamespace =
+  // prettier-ignore
+  // @ts-ignore
+  'default' in ReactOriginal ? ReactOriginal['default'] : ReactOriginal as any

src/utils/useIsomorphicLayoutEffect.native.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { React } from '../utils/react'
 
 // Under React Native, we know that we always want to use useLayoutEffect
 

src/utils/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { React } from '../utils/react'
 
 // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and

tsup.config.ts

@@ -76,6 +76,15 @@ export default defineConfig((options) => {
       format: ['esm'],
       outExtension: () => ({ js: '.mjs' }),
     },
+    // React Native requires a separate entry point for `"react-native"` batch dep
+    {
+      ...commonOptions,
+      entry: {
+        'react-redux.react-native': 'src/react-native.ts',
+      },
+      format: ['esm'],
+      outExtension: () => ({ js: '.mjs' }),
+    },
     // CJS development
     {
       ...commonOptions,

yarn.lock

@@ -9417,7 +9417,7 @@ __metadata:
     react: ^18.0
     react-dom: ^18.0
     react-native: ">=0.71"
-    redux: ^5.0.0-rc
+    redux: ^5.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true