Improve redux wrapper

Author: praveen-me

next-practise/pages/_app.js

@@ -3,7 +3,12 @@ import reduxWrapper from "../utils/reduxWrapper";
 
 function MyApp(props) {
   const { Component, pageProps } = props;
-  return <Component {...pageProps} />;
+  console.log({ pageProps });
+  return <Component {...props} {...pageProps} />;
 }
 
+MyApp.getInitialProps = () => {
+  return { testProp: "A props" };
+};
+
 export default reduxWrapper.wrapper(MyApp);

next-practise/pages/index.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import styles from "../styles/Home.module.css";
 
 export default function Home(props) {
-  const count = useSelector((state) => state.counter);
+  const count = useSelector((state) => state.count);
 
   console.log({ count });
 

next-practise/utils/reduxWrapper.js

@@ -13,24 +13,44 @@ function rootReducer(state = initialState, action) {
       return state;
   }
 }
+const getIsServer = () => typeof window == "undefined";
 
-const initializeStore = (preloadedState = {}) =>
-  createStore(rootReducer, preloadedState);
+const initializeStore = (preloadedState = {}) => createStore(rootReducer);
 
 function wrapper(Component) {
-  // function WithRedux(appProps) {
-  //   const store = useRef(initializeStore());
-  //   return (
-  //   );
-  // }
+  const displayName = `withRedux(${
+    Component.displayName || Component.name || "Component"
+  })`;
+
+  const hasInitialProps = "getInitialProps" in Component;
+
+  console.log({ displayName, hasInitialProps });
 
   class WithRedux extends App {
     constructor(props) {
       super(props);
       this.reduxStore = initializeStore();
     }
 
+    static getInitialProps(ctx) {
+      console.log(ctx);
+
+      return {};
+    }
+
     render() {
+      console.log(this.props);
+
+      const { initialState, initialProps, ...props } = this.props;
+
+      console.log({ initialProps, initialState });
+
+      let finalProps = {};
+
+      finalProps.pageProps = {
+        initialState: this.reduxStore.getState(),
+      };
+
       return (
         <Provider store={this.reduxStore}>
           <Component {...this.props} />;