Upgrade packages and add data reconciliation to RTK app

package.json

@@ -21,12 +21,12 @@
   "devDependencies": {
     "eslint": "8.29.0",
     "eslint-config-ringcentral-typescript": "7.0.3",
-    "husky": "7.0.4",
-    "lerna": "4.0.0",
-    "lint-staged": "11.1.2",
-    "prettier": "2.5.1",
+    "husky": "8.0.1",
+    "lerna": "6.0.1",
+    "lint-staged": "13.0.3",
+    "prettier": "2.7.1",
     "rimraf": "3.0.2",
-    "typescript": "4.5.2"
+    "typescript": "4.9.4"
   },
   "workspaces": [
     "packages/*"

packages/demo-page/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

packages/demo-page/package.json

@@ -11,23 +11,23 @@
   "dependencies": {
     "jsondiffpatch": "0.4.1",
     "next-redux-wrapper": "*",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.6",
-    "redux": "4.1.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.0.5",
+    "redux": "4.2.0",
     "redux-logger": "3.0.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.17.1",
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.20",
+    "@playwright/test": "1.29.2",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/react-redux": "7.1.25",
     "@types/redux-logger": "3.0.9",
-    "next": "12.0.4",
+    "next": "13.1.1",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.17.1",
+    "playwright": "1.29.2",
     "rimraf": "3.0.2",
-    "typescript": "4.5.2"
+    "typescript": "4.9.4"
   },
   "author": "Kirill Konshin",
   "repository": {

packages/demo-redux-toolkit/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

packages/demo-redux-toolkit/package.json

@@ -8,17 +8,17 @@
     "start": "next --port=6060"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.8.6",
+    "@reduxjs/toolkit": "1.9.1",
     "next-redux-wrapper": "*",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.6",
-    "redux": "4.1.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.0.5",
+    "redux": "4.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.17.1",
-    "next": "12.0.4",
-    "playwright": "1.17.1"
+    "@playwright/test": "1.29.2",
+    "next": "13.1.1",
+    "playwright": "1.29.2"
   },
   "license": "MIT"
 }

packages/demo-redux-toolkit/pages/detail/[id].tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useDispatch, useSelector, useStore} from 'react-redux';
+import {useSelector, useStore} from 'react-redux';
 import Link from 'next/link';
 import {InferGetServerSidePropsType, NextPage} from 'next';
 import {
@@ -9,6 +9,7 @@ import {
     selectDetailPageStateTimestamp,
     selectDetailPageSummary,
     selectSystemSource,
+    useDispatch,
     wrapper,
 } from '../../store';
 

packages/demo-redux-toolkit/pages/gipp.tsx

@@ -1,8 +1,16 @@
 import React from 'react';
-import {useDispatch, useSelector, useStore} from 'react-redux';
+import {useSelector, useStore} from 'react-redux';
 import Link from 'next/link';
 import {NextPage} from 'next';
-import {fetchGipp, selectGippPageData, selectGippPageStateTimestamp, selectGippPageTestData, selectSystemSource, wrapper} from '../store';
+import {
+    fetchGipp,
+    selectGippPageData,
+    selectGippPageStateTimestamp,
+    selectGippPageTestData,
+    selectSystemSource,
+    useDispatch,
+    wrapper,
+} from '../store';
 
 interface Props {
     name: string;

packages/demo-redux-toolkit/pages/pokemon/[pokemon].tsx

@@ -23,7 +23,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async cont
         store.dispatch(pokemonApi.endpoints.getPokemonByName.initiate(pokemon));
     }
 
-    await Promise.all(pokemonApi.util.getRunningOperationPromises());
+    await Promise.all(store.dispatch(pokemonApi.util.getRunningQueriesThunk()));
 
     console.log('SERVER STATE', store.getState().pokemonApi);
 

packages/demo-redux-toolkit/pages/subject/[id].tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import {useDispatch, useSelector, useStore} from 'react-redux';
+import {useSelector, useStore} from 'react-redux';
 import Link from 'next/link';
 import {InferGetServerSidePropsType, NextPage} from 'next';
-import {fetchSubject, selectSubjectPageId, selectSubjectPageName, selectSubjectPageStateTimestamp, wrapper} from '../../store';
+import {fetchSubject, selectSubjectPageId, selectSubjectPageName, selectSubjectPageStateTimestamp, useDispatch, wrapper} from '../../store';
 
 const Page: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ({serverTimestamp}) => {
     console.log('State on render', useStore().getState());

packages/demo-redux-toolkit/store.ts

@@ -2,6 +2,7 @@ import {configureStore, createSelector, createSlice, PayloadAction, ThunkAction}
 import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
 import {Action, combineReducers} from 'redux';
 import {createWrapper, HYDRATE} from 'next-redux-wrapper';
+import {useDispatch as dispatchHook, useSelector as selectorHook, TypedUseSelectorHook} from 'react-redux';
 
 // System model
 interface SystemData {
@@ -28,11 +29,13 @@ const systemSlice = createSlice({
     extraReducers: {
         [HYDRATE]: (state, action) => {
             console.log('HYDRATE system', action.payload);
-
-            return {
-                ...state,
-                ...action.payload.system,
-            };
+            // React 18+ and/or next 13+ force us to do data reconciliation
+            if (action.payload.system.data !== initialSystemState.data) {
+                return {
+                    ...state,
+                    ...action.payload.system,
+                };
+            }
         },
     },
 });
@@ -64,11 +67,13 @@ const subjectPageSlice = createSlice({
     extraReducers: {
         [HYDRATE]: (state, action) => {
             console.log('HYDRATE subjectPage', action.payload);
-
-            return {
-                ...state,
-                ...action.payload.subjectPage,
-            };
+            // React 18+ and/or next 13+ force us to do data reconciliation
+            if (action.payload.subjectPage.data !== subjectPageInitialState.data) {
+                return {
+                    ...state,
+                    ...action.payload.subjectPage,
+                };
+            }
         },
     },
 });
@@ -81,7 +86,7 @@ interface DetailPageData {
 }
 
 interface DetailPageState {
-    data: DetailPageData | null;
+    data: DetailPageData;
 }
 
 const detailPageInitialState: DetailPageState = {
@@ -108,10 +113,19 @@ const detailPageSlice = createSlice({
         [HYDRATE]: (state, action) => {
             console.log('HYDRATE detailPage', action.payload);
 
-            return {
-                ...state,
-                ...action.payload.detailPage,
-            };
+            const {
+                data: {id: initialId, stateTimestamp: initialStateTimestamp, summary: initialSummary},
+            } = detailPageInitialState;
+            const {
+                data: {id, stateTimestamp, summary},
+            } = action.payload.detailPage;
+            // React 18+ and/or next 13+ force us to do data reconciliation
+            if (id !== initialId && stateTimestamp !== initialStateTimestamp && summary !== initialSummary) {
+                return {
+                    ...state,
+                    ...action.payload.detailPage,
+                };
+            }
         },
     },
 });
@@ -128,11 +142,7 @@ interface GippPageState {
 }
 
 const gippPageInitialState: GippPageState = {
-    data: {
-        id: null,
-        testData: null,
-        stateTimestamp: null,
-    },
+    data: null,
 };
 
 // Gipp page slice approach
@@ -148,10 +158,13 @@ const gippPageSlice = createSlice({
         [HYDRATE]: (state, action) => {
             console.log('HYDRATE gippPage', action.payload);
 
-            return {
-                ...state,
-                ...action.payload.gippPage,
-            };
+            // React 18+ and/or next 13+ force us to do data reconciliation
+            if (action.payload.gippPage.data !== gippPageInitialState.data) {
+                return {
+                    ...state,
+                    ...action.payload.gippPage,
+                };
+            }
         },
     },
 });
@@ -199,9 +212,17 @@ const makeStore = () =>
 type AppStore = ReturnType<typeof makeStore>;
 export type AppState = ReturnType<AppStore['getState']>;
 type AppThunk<ReturnType = void> = ThunkAction<ReturnType, AppState, unknown, Action>;
+type AppDispatch = AppStore['dispatch'];
 
 export const wrapper = createWrapper<AppStore>(makeStore);
 
+/** Use throughout your app instead of plain react-redux `useDispatch` and `useSelector` hooks
+ *
+ * https://react-redux.js.org/tutorials/typescript-quick-start#define-typed-hooks
+ */
+export const useDispatch: () => AppDispatch = dispatchHook;
+export const useSelector: TypedUseSelectorHook<AppState> = selectorHook;
+
 // System thunk
 export const fetchSystem = (): AppThunk => async dispatch => {
     const timeoutPromise = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout));

packages/demo-saga-page/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

packages/demo-saga-page/package.json

@@ -11,24 +11,24 @@
   "dependencies": {
     "jsondiffpatch": "0.4.1",
     "next-redux-wrapper": "*",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.6",
-    "redux": "4.1.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.0.5",
+    "redux": "4.2.0",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.1.3"
+    "redux-saga": "1.2.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.17.1",
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.20",
+    "@playwright/test": "1.29.2",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/react-redux": "7.1.25",
     "@types/redux-logger": "3.0.9",
-    "next": "12.0.4",
+    "next": "13.1.1",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.17.1",
+    "playwright": "1.29.2",
     "rimraf": "3.0.2",
-    "typescript": "4.5.2"
+    "typescript": "4.9.4"
   },
   "author": "Kirill Konshin",
   "repository": {

packages/demo-saga/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

packages/demo-saga/package.json

@@ -11,24 +11,24 @@
   "dependencies": {
     "jsondiffpatch": "0.4.1",
     "next-redux-wrapper": "*",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.6",
-    "redux": "4.1.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.0.5",
+    "redux": "4.2.0",
     "redux-logger": "3.0.6",
-    "redux-saga": "1.1.3"
+    "redux-saga": "1.2.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.17.1",
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.20",
+    "@playwright/test": "1.29.2",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/react-redux": "7.1.25",
     "@types/redux-logger": "3.0.9",
-    "next": "12.0.4",
+    "next": "13.1.1",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.17.1",
+    "playwright": "1.29.2",
     "rimraf": "3.0.2",
-    "typescript": "4.5.2"
+    "typescript": "4.9.4"
   },
   "author": "Kirill Konshin",
   "repository": {

packages/demo/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

packages/demo/package.json

@@ -10,23 +10,23 @@
   },
   "dependencies": {
     "next-redux-wrapper": "*",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.6",
-    "redux": "4.1.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "8.0.5",
+    "redux": "4.2.0",
     "redux-logger": "3.0.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.17.1",
-    "@types/react": "17.0.37",
-    "@types/react-dom": "17.0.11",
-    "@types/react-redux": "7.1.20",
+    "@playwright/test": "1.29.2",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@types/react-redux": "7.1.25",
     "@types/redux-logger": "3.0.9",
-    "next": "12.0.4",
+    "next": "13.1.1",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.17.1",
+    "playwright": "1.29.2",
     "rimraf": "3.0.2",
-    "typescript": "4.5.2"
+    "typescript": "4.9.4"
   },
   "author": "Kirill Konshin",
   "repository": {