Improved everything

kirill-konshin · Feb 17, 2017 · 0ebca3d · 0ebca3d
1 parent f0d3e85
commit 0ebca3d
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 91 deletions.
diff --git a/next.js/components/Layout.js b/next.js/components/Layout.js
@@ -2,7 +2,7 @@ import React from "react";
 import {connect} from "react-redux";
 import Head from "next/head";
 
-export default (({children, reduxStatus, title = 'Wat?'}) => (
+export default connect(state => state)(({children, reduxStatus, title = 'Wat?'}) => (
     <div className="container">
         <Head>
             <title>{title} | Next</title>

diff --git a/next.js/lib/connectToProvider.js b/next.js/lib/connectToProvider.js
diff --git a/next.js/lib/provide.js b/next.js/lib/provide.js
@@ -0,0 +1,72 @@
+import React from "react";
+import {Provider} from "react-redux";
+
+let memoizedStore;
+
+const initStore = (makeStore, isServer, initialState) => {
+
+    // Always make a new store if server
+    if (isServer && typeof window === 'undefined') {
+        return makeStore(initialState);
+    }
+
+    // Memoize store if client
+    if (!memoizedStore) {
+        memoizedStore = makeStore(initialState);
+    }
+
+    return memoizedStore
+
+};
+
+export default (createStore) => {
+
+    return (Cmp) => {
+
+        const WrappedCmp = ({initialState, isServer, store, ...props}) => {
+
+            if (!store || !store.dispatch) {
+                store = initStore(createStore, isServer, initialState);
+                //console.log('4. WrappedCmp.render created new store with initial state', initialState);
+            } else {
+                //console.log('4. WrappedCmp.render picked up existing store');
+            }
+
+            return (
+                <Provider store={store}>
+                    <Cmp {...props}/>
+                </Provider>
+            );
+
+        };
+
+        /**
+         * @param dialog
+         * @return {{store, isServer: boolean, initialState}}
+         */
+        WrappedCmp.getInitialProps = async(dialog) => {
+
+            const isServer = !!dialog.req;
+            const store = initStore(createStore, isServer);
+
+            // console.log('1. WrappedCmp.getInitialProps wrapper creates the store');
+
+            if (Cmp.getInitialProps) {
+                await Cmp.getInitialProps.call(Cmp, {...dialog, isServer, store});
+            }
+
+            // console.log('3. WrappedCmp.getInitialProps has store state', store.getState());
+
+            return {
+                store,
+                isServer,
+                initialState: store.getState()
+            };
+
+        };
+
+        return WrappedCmp;
+
+    };
+
+};
diff --git a/next.js/pages/index.js b/next.js/pages/index.js
@@ -1,14 +1,15 @@
 import React from "react";
+import {connect} from "react-redux";
 import Link from "next/link";
 import {makeStore} from "../lib/store";
-import connectToProvider from "../lib/connectToProvider";
+import provide from "../lib/provide";
 import Layout from "../components/Layout";
 
 class Page extends React.Component {
 
     static getInitialProps({store, isServer, pathname, query}) {
 
-        console.log('2. Page.getInitialProps uses the store to dispatch things, pathname', pathname, 'query', query);
+        // console.log('2. Page.getInitialProps uses the store to dispatch things, pathname', pathname, 'query', query);
 
         // If it's a server, then all async actions must be done before return or return a promise
         if (isServer) {
@@ -28,7 +29,7 @@ class Page extends React.Component {
     }
 
     render() {
-        console.log('5. Page.render');
+        // console.log('5. Page.render');
         return (
             <Layout title="Index">
                 <h2>Index</h2>
@@ -41,6 +42,7 @@ class Page extends React.Component {
 
 }
 
-Page = connectToProvider(makeStore, state => state)(Page);
+Page = connect(state => state)(Page);
+Page = provide(makeStore)(Page); // note that provide should be last
 
 export default Page;
diff --git a/next.js/pages/other.js b/next.js/pages/other.js
@@ -1,14 +1,14 @@
 import Link from "next/link";
 import React from "react";
 import Layout from "../components/Layout";
+import {makeStore} from "../lib/store";
+import provide from "../lib/provide";
 
-export default () => {
-    return (
-        <Layout title="Other">
-            <h2>Other</h2>
-            <nav>
-                <Link href="/"><a>Navigate to index</a></Link>
-            </nav>
-        </Layout>
-    )
-};
+export default provide(makeStore)(() => (
+    <Layout title="Other">
+        <h2>Other</h2>
+        <nav>
+            <Link href="/"><a>Navigate to index</a></Link>
+        </nav>
+    </Layout>
+));