Hooks instead of class-based component (#419)

Author: kirill-konshin

README.md

@@ -131,17 +131,36 @@ export const wrapper = createWrapper(makeStore, {debug: true});
 
 </details>
 
+## `wrapper.useWrappedStore`
+
 It is highly recommended to use `pages/_app` to wrap all pages at once, otherwise due to potential race conditions you may get `Cannot update component while rendering another component`:
 
-```typescript
+````typescript
 import React, {FC} from 'react';
+import {Provider} from 'react-redux';
 import {AppProps} from 'next/app';
 import {wrapper} from '../components/store';
 
 const WrappedApp: FC<AppProps> = ({Component, pageProps}) => <Component {...pageProps} />;
 
-export default wrapper.withRedux(WrappedApp);
-```
+Instead of `wrapper.useWrappedStore` you can also use legacy HOC, that can work with class-based components.
+
+:warning: Next.js provides [generic `getInitialProps`](https://github.com/vercel/next.js/blob/canary/packages/next/pages/_app.tsx#L21) when using `class MyApp extends App` which will be picked up by wrapper, so you **must not extend `App`** as you'll be opted out of Automatic Static Optimization: https://err.sh/next.js/opt-out-auto-static-optimization. Just export a regular Functional Component as in the example above.
+
+```typescript
+import React from 'react';
+import {wrapper} from '../components/store';
+import {AppProps} from 'next/app';
+
+class MyApp extends React.Component<AppProps> {
+  render() {
+    const {Component, pageProps} = this.props;
+    return <Component {...pageProps} />;
+  }
+}
+
+export default wrapper.withRedux(MyApp);
+````
 
 <details>
 <summary>Same code in JavaScript (without types)</summary>
@@ -681,60 +700,61 @@ import {Action} from 'redux';
 import {createWrapper, HYDRATE} from 'next-redux-wrapper';
 
 export const subjectSlice = createSlice({
-    name: 'subject',
+  name: 'subject',
 
-    initialState: {} as any,
+  initialState: {} as any,
 
-    reducers: {
-        setEnt(state, action) {
-            return action.payload;
-        },
+  reducers: {
+    setEnt(state, action) {
+      return action.payload;
     },
+  },
 
-    extraReducers: {
-        [HYDRATE]: (state, action) => {
-            console.log('HYDRATE', state, action.payload);
-            return {
-                ...state,
-                ...action.payload.subject,
-            };
-        },
+  extraReducers: {
+    [HYDRATE]: (state, action) => {
+      console.log('HYDRATE', state, action.payload);
+      return {
+        ...state,
+        ...action.payload.subject,
+      };
     },
+  },
 });
 
 const makeStore = () =>
-    configureStore({
-        reducer: {
-            [subjectSlice.name]: subjectSlice.reducer,
-        },
-        devTools: true,
-    });
+  configureStore({
+    reducer: {
+      [subjectSlice.name]: subjectSlice.reducer,
+    },
+    devTools: true,
+  });
 
 export type AppStore = ReturnType<typeof makeStore>;
 export type AppState = ReturnType<AppStore['getState']>;
 export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, AppState, unknown, Action>;
 
-export const fetchSubject = (id: any): AppThunk => async dispatch => {
+export const fetchSubject =
+  (id: any): AppThunk =>
+  async dispatch => {
     const timeoutPromise = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout));
 
     await timeoutPromise(200);
 
     dispatch(
-        subjectSlice.actions.setEnt({
-            [id]: {
-                id,
-                name: `Subject ${id}`,
-            },
-        }),
+      subjectSlice.actions.setEnt({
+        [id]: {
+          id,
+          name: `Subject ${id}`,
+        },
+      }),
     );
-};
+  };
 
 export const wrapper = createWrapper<AppStore>(makeStore);
 
 export const selectSubject = (id: any) => (state: AppState) => state?.[subjectSlice.name]?.[id];
 ```
 
-
 It is recommended to export typed `State` and `ThunkAction`:
 
 ```ts

package.json

@@ -21,12 +21,12 @@
   "devDependencies": {
     "eslint": "7.32.0",
     "eslint-config-ringcentral-typescript": "0.0.0-master.212.1",
-    "husky": "7.0.2",
+    "husky": "7.0.4",
     "lerna": "4.0.0",
     "lint-staged": "11.1.2",
-    "prettier": "2.4.0",
+    "prettier": "2.5.0",
     "rimraf": "3.0.2",
-    "typescript": "4.4.3"
+    "typescript": "4.5.2"
   },
   "workspaces": [
     "packages/*"
@@ -41,5 +41,8 @@
   },
   "homepage": "https://github.com/kirill-konshin/next-redux-wrapper",
   "license": "MIT",
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "@types/react": "17.0.37"
+  }
 }

packages/demo-page/package.json

@@ -13,20 +13,21 @@
     "next-redux-wrapper": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-redux": "7.2.5",
-    "redux": "4.1.1",
+    "react-redux": "7.2.6",
+    "redux": "4.1.2",
     "redux-logger": "3.0.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.14.1",
-    "@types/react-dom": "17.0.9",
-    "@types/react-redux": "7.1.18",
+    "@playwright/test": "1.17.1",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.20",
     "@types/redux-logger": "3.0.9",
     "next": "12.0.4",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.14.1",
+    "playwright": "1.17.1",
     "rimraf": "3.0.2",
-    "typescript": "4.4.3"
+    "typescript": "4.5.2"
   },
   "author": "Kirill Konshin",
   "repository": {

packages/demo-page/tsconfig.json

@@ -1,5 +1,14 @@
 {
   "extends": "../configs/tsconfig.demo.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "incremental": true
+  }
 }

packages/demo-redux-toolkit/package.json

@@ -8,17 +8,17 @@
     "start": "next --port=6060"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.6.1",
+    "@reduxjs/toolkit": "1.6.2",
     "next-redux-wrapper": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "7.2.5",
-    "redux": "4.1.1"
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "7.2.6",
+    "redux": "4.1.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.14.1",
+    "@playwright/test": "1.17.1",
     "next": "12.0.4",
-    "playwright": "1.14.1"
+    "playwright": "1.17.1"
   },
   "license": "MIT"
 }

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

@@ -1,7 +1,15 @@
 import React, {FC} from 'react';
+import {Provider} from 'react-redux';
 import {AppProps} from 'next/app';
 import {wrapper} from '../store';
 
-const MyApp: FC<AppProps> = ({Component, pageProps}) => <Component {...pageProps} />;
+const MyApp: FC<AppProps> = ({Component, ...rest}) => {
+    const {store, props} = wrapper.useWrappedStore(rest);
+    return (
+        <Provider store={store}>
+            <Component {...props.pageProps} />
+        </Provider>
+    );
+};
 
-export default wrapper.withRedux(MyApp);
+export default MyApp;

packages/demo-redux-toolkit/tsconfig.json

@@ -1,5 +1,14 @@
 {
   "extends": "../configs/tsconfig.demo.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "incremental": true
+  }
 }

packages/demo-saga-page/package.json

@@ -13,21 +13,22 @@
     "next-redux-wrapper": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-redux": "7.2.5",
-    "redux": "4.1.1",
+    "react-redux": "7.2.6",
+    "redux": "4.1.2",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3"
   },
   "devDependencies": {
-    "@playwright/test": "1.14.1",
-    "@types/react-dom": "17.0.9",
-    "@types/react-redux": "7.1.18",
+    "@playwright/test": "1.17.1",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.20",
     "@types/redux-logger": "3.0.9",
     "next": "12.0.4",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.14.1",
+    "playwright": "1.17.1",
     "rimraf": "3.0.2",
-    "typescript": "4.4.3"
+    "typescript": "4.5.2"
   },
   "author": "Kirill Konshin",
   "repository": {

packages/demo-saga-page/tsconfig.json

@@ -1,5 +1,14 @@
 {
   "extends": "../configs/tsconfig.demo.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "incremental": true
+  }
 }

packages/demo-saga/package.json

@@ -13,21 +13,22 @@
     "next-redux-wrapper": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-redux": "7.2.5",
-    "redux": "4.1.1",
+    "react-redux": "7.2.6",
+    "redux": "4.1.2",
     "redux-logger": "3.0.6",
     "redux-saga": "1.1.3"
   },
   "devDependencies": {
-    "@playwright/test": "1.14.1",
-    "@types/react-dom": "17.0.9",
-    "@types/react-redux": "7.1.18",
+    "@playwright/test": "1.17.1",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.20",
     "@types/redux-logger": "3.0.9",
     "next": "12.0.4",
     "next-redux-wrapper-configs": "*",
-    "playwright": "1.14.1",
+    "playwright": "1.17.1",
     "rimraf": "3.0.2",
-    "typescript": "4.4.3"
+    "typescript": "4.5.2"
   },
   "author": "Kirill Konshin",
   "repository": {