Merge pull request #2409 from FaberVitale/chore/upgrade-deps-react-#2404

Author: markerikson

.yarn/patches/react-scripts__npm_4.0.2.patch

@@ -4,7 +4,6 @@
     "@manaflair/redux-batch": "^1.0.0",
     "@types/nanoid": "^2.1.0",
     "@types/react": "^16.9.46",
-    "@types/react-redux": "^7.1.9",
     "@types/redux-logger": "^3.0.8",
     "async-mutex": "^0.3.2",
     "axios": "^0.20.0",

docs/package.json

@@ -210,6 +210,8 @@ export const selectDataByName = (state: RootState, name: string) =>
   state.pokemon.dataByName[name]
 
 // file: src/store.ts noEmit
+import { useDispatch } from 'react-redux'
+import { EnhancedStore } from '@reduxjs/toolkit'
 interface Pokemon {}
 type RequestState = 'pending' | 'fulfilled' | 'rejected'
 
@@ -221,10 +223,14 @@ export type RootState = {
   pokemon: typeof initialPokemonSlice
 }
 
+export declare const store: EnhancedStore<RootState> 
+export type AppDispatch = typeof store.dispatch
+export declare const useAppDispatch: () => (...args: any[])=> any;
+
 // file: src/hooks.ts
 import { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from './store'
+import { useSelector } from 'react-redux'
+import { RootState, useAppDispatch } from './store'
 import {
   fetchPokemonByName,
   selectStatusByName,
@@ -233,7 +239,7 @@ import {
 
 // highlight-start
 export function useGetPokemonByNameQuery(name: string) {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   // select the current status from the store state for the provided name
   const status = useSelector((state: RootState) =>
     selectStatusByName(state, name)

docs/rtk-query/usage/migrating-to-rtk-query.mdx

@@ -1 +1,3 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+# https://github.com/facebook/create-react-app/issues/11940
+DISABLE_ESLINT_PLUGIN=true

examples/action-listener/counter/.env

@@ -5,13 +5,13 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "clsx": "1.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "7.2.2",
-    "react-scripts": "4.0.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-redux": "^8.0.2",
+    "react-scripts": "5.0.1",
     "typescript": "~4.2.4"
   },
   "scripts": {
@@ -22,9 +22,11 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+      "react-app"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off"
+    }
   },
   "browserslist": {
     "production": [
@@ -37,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "jest-watch-typeahead": "^1.1.0"
   }
 }

examples/action-listener/counter/package.json

@@ -1,5 +1,4 @@
-import { FormEvent } from 'react'
-import { ChangeEvent } from 'react-redux/node_modules/@types/react'
+import { FormEvent, ChangeEvent } from 'react'
 import { useAppDispatch, useAppSelector } from '../../store'
 import { themeActions, ThemeState } from '../../services/theme/slice'
 import styles from './changeThemeForm.module.css'

examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import './index.css'
 import { store } from './store'
 import { themeActions } from './services/theme/slice'
@@ -8,4 +8,6 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
   store.dispatch(themeActions.changeColorScheme('dark'))
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+
+root.render(<App />)

examples/action-listener/counter/src/index.tsx

@@ -1 +1,2 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true
+DISABLE_ESLINT_PLUGIN=true

examples/query/react/advanced/.env

@@ -7,15 +7,14 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.0-rc.1",
-    "react": "17.0.0",
-    "react-dom": "17.0.0",
-    "react-redux": "7.2.2",
-    "react-scripts": "4.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-redux": "^8.0.2",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
-    "@types/react-redux": "7.1.9",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.5",
     "typescript": "~4.2.4"
   },
   "eslintConfig": {

examples/query/react/advanced/package.json

@@ -1,13 +1,14 @@
-import { render } from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { ApiProvider } from '@reduxjs/toolkit/query/react'
-
 import App from './App'
 import { pokemonApi } from './services/pokemon'
 
 const rootElement = document.getElementById('root')
-render(
+
+const reactRoot = ReactDOM.createRoot(rootElement as HTMLElement)
+
+reactRoot.render(
   <ApiProvider api={pokemonApi}>
     <App />
-  </ApiProvider>,
-  rootElement
+  </ApiProvider>
 )