Merge pull request #2095 from reduxjs/v9.0-integration

Author: markerikson

.github/workflows/test.yml

@@ -52,6 +52,7 @@ jobs:
       matrix:
         node: ['16.x']
         ts: ['4.7', '4.8', '4.9', '5.0', '5.1', '5.2']
+
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
@@ -120,6 +121,10 @@ 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 .
 
@@ -135,7 +140,7 @@ jobs:
 
       - name: Install deps
         working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
-        run: rm yarn.lock && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn add msw@latest
+        run: rm yarn.lock && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install
 
       - name: Install Playwright browser if necessary
         working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+build*/

.babelrc.js renamed to babel.config.js

@@ -16,6 +16,7 @@ module.exports = {
       },
     ],
     '@babel/preset-typescript',
+    'module:metro-react-native-babel-preset',
   ],
   plugins: [
     ['@babel/proposal-decorators', { legacy: true }],
@@ -24,15 +25,6 @@ module.exports = {
     ['@babel/plugin-proposal-private-methods', { loose: true }],
     ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     cjs && ['@babel/transform-modules-commonjs'],
-    [
-      '@babel/transform-runtime',
-      {
-        useESModules: !cjs,
-        version: require('./package.json').dependencies[
-          '@babel/runtime'
-        ].replace(/^[^0-9]*/, ''),
-      },
-    ],
   ].filter(Boolean),
   assumptions: {
     enumerableModuleMeta: true,

docs/api/Provider.md

@@ -39,9 +39,10 @@ interface ProviderProps<A extends Action = AnyAction, S = any> {
    * to create a context to be used.
    * If this is used, you'll need to customize `connect` by supplying the same
    * context provided to the Provider.
-   * Initial value doesn't matter, as it is overwritten with the internal state of Provider.
+   * Set the initial value to null, and the hooks will error
+   * if this is not overwritten by Provider.
    */
-  context?: Context<ReactReduxContextValue<S, A>>
+  context?: Context<ReactReduxContextValue<S, A> | null>
 
   /** Global configuration for the `useSelector` stability check */
   stabilityCheck?: StabilityCheck

docs/api/hooks.md

@@ -48,12 +48,14 @@ From there, you may import any of the listed React Redux hooks APIs and use them
 type RootState = ReturnType<typeof store.getState>
 type SelectorFn = <Selected>(state: RootState) => Selected
 type EqualityFn = (a: any, b: any) => boolean
-export type CheckFrequency = 'never' | 'once' | 'always'
+export type DevModeCheckFrequency = 'never' | 'once' | 'always'
 
 interface UseSelectorOptions {
   equalityFn?: EqualityFn
-  stabilityCheck?: CheckFrequency
-  noopCheck?: CheckFrequency
+  devModeChecks?: {
+    stabilityCheck?: DevModeCheckFrequency
+    identityFunctionCheck?: DevModeCheckFrequency
+  }
 }
 
 const result: Selected = useSelector(
@@ -296,14 +298,24 @@ By default, this will only happen when the selector is first called. You can con
 
 ```tsx title="Individual hook setting"
 function Component() {
-  const count = useSelector(selectCount, { stabilityCheck: 'never' })
+  const count = useSelector(selectCount, {
+    devModeChecks: { stabilityCheck: 'never' },
+  })
   // run once (default)
-  const user = useSelector(selectUser, { stabilityCheck: 'once' })
+  const user = useSelector(selectUser, {
+    devModeChecks: { stabilityCheck: 'once' },
+  })
   // ...
 }
 ```
 
-#### No-op selector check
+#### Identity Function (`state => state`) Check
+
+:::danger Breaking Change!
+
+This was previously referred to as `noopCheck`.
+
+:::
 
 In development, a check is conducted on the result returned by the selector. It warns in the console if the result is the same as the parameter passed in, i.e. the root state.
 
@@ -321,16 +333,20 @@ const user = useSelector((state) => state.auth.currentUser)
 By default, this will only happen when the selector is first called. You can configure the check in the Provider or at each `useSelector` call.
 
 ```tsx title="Global setting via context"
-<Provider store={store} noopCheck="always">
+<Provider store={store} identityFunctionCheck="always">
   {children}
 </Provider>
 ```
 
 ```tsx title="Individual hook setting"
 function Component() {
-  const count = useSelector(selectCount, { noopCheck: 'never' })
+  const count = useSelector(selectCount, {
+    devModeChecks: { identityFunctionCheck: 'never' },
+  })
   // run once (default)
-  const user = useSelector(selectUser, { noopCheck: 'once' })
+  const user = useSelector(selectUser, {
+    devModeChecks: { identityFunctionCheck: 'once' },
+  })
   // ...
 }
 ```

docs/using-react-redux/accessing-store.md

@@ -27,7 +27,7 @@ Redux store accessible to deeply nested connected components. As of React Redux
 by a single default context object instance generated by `React.createContext()`, called `ReactReduxContext`.
 
 React Redux's `<Provider>` component uses `<ReactReduxContext.Provider>` to put the Redux store and the current store
-state into context, and `connect` uses `<ReactReduxContext.Consumer>` to read those values and handle updates.
+state into context, and `connect` uses `useContext(ReactReduxContext)` to read those values and handle updates.
 
 ## Using the `useStore` Hook
 
@@ -87,8 +87,8 @@ This also provides a natural isolation of the stores as they live in separate co
 
 ```js
 // a naive example
-const ContextA = React.createContext();
-const ContextB = React.createContext();
+const ContextA = React.createContext(null);
+const ContextB = React.createContext(null);
 
 // assuming reducerA and reducerB are proper reducer functions
 const storeA = createStore(reducerA);

jest.config.js

@@ -1,58 +1,30 @@
-const { defaults: tsjPreset } = require('ts-jest/presets')
-
-const defaults = {
-  coverageDirectory: './coverage/',
-  collectCoverage: true,
-  testURL: 'http://localhost',
-}
+process.env.TS_JEST_DISABLE_VER_CHECKER = true
 
 const NORMAL_TEST_FOLDERS = ['components', 'hooks', 'integration', 'utils']
 
 const tsTestFolderPath = (folderName) =>
   `<rootDir>/test/${folderName}/**/*.{ts,tsx}`
 
 const tsStandardConfig = {
-  ...defaults,
-  displayName: 'ReactDOM 18 (Shim)',
+  displayName: 'ReactDOM 18',
   preset: 'ts-jest',
   testMatch: NORMAL_TEST_FOLDERS.map(tsTestFolderPath),
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setupAfter.js'],
 }
 
 const rnConfig = {
-  ...defaults,
   displayName: 'React Native',
   testMatch: [tsTestFolderPath('react-native')],
   preset: 'react-native',
   transform: {
-    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-    ...tsjPreset.transform,
-  },
-}
-
-const standardReact17Config = {
-  ...tsStandardConfig,
-  displayName: 'ReactDOM 17',
-  moduleNameMapper: {
-    '^react$': 'react-17',
-    '^react-dom$': 'react-dom-17',
-    '^react-test-renderer$': 'react-test-renderer-17',
-    '^@testing-library/react$': '@testing-library/react-12',
-  },
-}
-
-const nextEntryConfig = {
-  ...tsStandardConfig,
-  displayName: 'ReactDOM 18 (Next)',
-  moduleNameMapper: {
-    '../../src/index': '<rootDir>/src/next',
+    '^.+\\.(js|jsx|ts|tsx)$': [
+      'babel-jest',
+      { configFile: './babel.config.js' }, // <- cannot use rootDir here
+    ],
   },
 }
 
 module.exports = {
-  projects: [
-    tsStandardConfig,
-    rnConfig,
-    standardReact17Config,
-    nextEntryConfig,
-  ],
+  projects: [tsStandardConfig, rnConfig],
 }

jest.setupAfter.js

@@ -0,0 +1,3 @@
+const { TextEncoder, TextDecoder } = require('util')
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux",
-  "version": "8.1.3",
+  "version": "9.0.0-rc.0",
   "description": "Official React bindings for Redux",
   "keywords": [
     "react",
@@ -12,23 +12,28 @@
   "homepage": "https://github.com/reduxjs/react-redux",
   "repository": "github:reduxjs/react-redux",
   "bugs": "https://github.com/reduxjs/react-redux/issues",
-  "main": "./lib/index.js",
-  "types": "./es/index.d.ts",
-  "unpkg": "dist/react-redux.js",
-  "module": "es/index.js",
+  "module": "dist/react-redux.legacy-esm.js",
+  "main": "dist/cjs/index.js",
+  "types": "dist/react-redux.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/react-redux.d.ts",
+      "react-server": "./dist/rsc.mjs",
+      "import": "./dist/react-redux.mjs",
+      "default": "./dist/cjs/index.js"
+    },
+    "./alternate-renderers": {
+      "types": "./dist/react-redux.d.ts",
+      "import": "./dist/react-redux.alternate-renderers.mjs"
+    }
+  },
+  "sideEffects": false,
   "files": [
-    "dist",
-    "lib",
-    "src",
-    "es"
+    "dist"
   ],
   "scripts": {
-    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions \".js,.ts,.tsx\" --out-dir lib",
-    "build:es": "babel src --extensions \".js,.ts,.tsx\" --out-dir es",
-    "build:umd": "cross-env NODE_ENV=development rollup -c -o dist/react-redux.js",
-    "build:umd:min": "cross-env NODE_ENV=production rollup -c -o dist/react-redux.min.js",
-    "build:types": "tsc",
-    "build": "yarn build:types && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
+    "build": "tsup",
     "clean": "rimraf lib dist es coverage",
     "api-types": "api-extractor run --local",
     "format": "prettier --write \"{src,test}/**/*.{js,ts,tsx}\" \"docs/**/*.md\"",
@@ -40,12 +45,12 @@
     "coverage": "codecov"
   },
   "peerDependencies": {
-    "@types/react": "^16.8 || ^17.0 || ^18.0",
-    "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
-    "react": "^16.8 || ^17.0 || ^18.0",
-    "react-dom": "^16.8 || ^17.0 || ^18.0",
-    "react-native": ">=0.59",
-    "redux": "^4 || ^5.0.0-beta.0"
+    "@types/react": "^18.2.41",
+    "@types/react-dom": "^18.2.17",
+    "react": "^18.0",
+    "react-dom": "^18.0",
+    "react-native": ">=0.71",
+    "redux": "^5.0.0-rc.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -65,44 +70,35 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
     "@types/use-sync-external-store": "^0.0.3",
-    "hoist-non-react-statics": "^3.3.2",
-    "react-is": "^18.0.0",
     "use-sync-external-store": "^1.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
     "@babel/plugin-proposal-decorators": "^7.12.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-flow-strip-types": "^7.22.5",
     "@babel/plugin-transform-react-display-name": "^7.12.1",
     "@babel/plugin-transform-react-jsx": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-typescript": "^7.14.5",
     "@microsoft/api-extractor": "^7.18.1",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.3.3",
+    "@reduxjs/toolkit": "^2.0.0-beta.4",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/jest-native": "^3.4.3",
     "@testing-library/react": "13.0.0",
     "@testing-library/react-12": "npm:@testing-library/react@^12",
     "@testing-library/react-hooks": "^3.4.2",
     "@testing-library/react-native": "^7.1.0",
-    "@types/object-assign": "^4.0.30",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/react-is": "^17",
+    "@types/react": "^18.2.41",
+    "@types/react-dom": "^18.2.17",
     "@types/react-native": "^0.67.4",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.1",
+    "babel-jest": "^29",
     "codecov": "^3.8.0",
     "cross-env": "^7.0.2",
     "eslint": "^7.12.0",
@@ -111,20 +107,18 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "glob": "^7.1.6",
-    "jest": "^26.6.1",
+    "jest": "^29",
+    "jest-environment-jsdom": "^29.5.0",
+    "metro-react-native-babel-preset": "^0.76.6",
     "prettier": "^2.1.2",
-    "react": "18.0.0",
-    "react-17": "npm:react@^17",
-    "react-dom": "18.0.0",
-    "react-dom-17": "npm:react-dom@^17",
-    "react-native": "^0.64.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "^0.71.11",
     "react-test-renderer": "18.0.0",
-    "react-test-renderer-17": "npm:react-test-renderer@^17",
-    "redux": "^4.0.5",
+    "redux": "^5.0.0-beta.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.32.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "26.5.6",
-    "typescript": "^4.3.4"
+    "ts-jest": "^29",
+    "tsup": "^7.0.0",
+    "typescript": "^5.0"
   }
 }