Fix/gip ctx (#10)

* fix(redux,css): plugins should not alter gip calls * fix(redux): use reference store
airyrooms · May 20, 2019 · 7684211 · 7684211
1 parent a54ec58
commit 7684211
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/packages/css-plugin/src/pageWithStyles.js b/packages/css-plugin/src/pageWithStyles.js
@@ -10,14 +10,6 @@ export default (WrappedComponent) => {
   class PageWithStyles extends React.Component {
     static displayName = `<PageWithStyles Component={${displayName}} />`;
 
-    static getInitialProps(context) {
-      if (typeof WrappedComponent.getInitialProps === 'function') {
-        return WrappedComponent.getInitialProps.call(WrappedComponent, context);
-      }
-
-      return context;
-    }
-
     render() {
       // Only renders style on server
       // On client render, style will be moved to head

diff --git a/packages/redux-plugin/src/reduxScript.jsx b/packages/redux-plugin/src/reduxScript.jsx
@@ -4,11 +4,13 @@ import { STORE_KEY } from './const';
 
 export class ReduxScript extends React.Component {
   static contextTypes = {
-    ctx: PropTypes.any,
+    initialProps: PropTypes.any,
   };
 
   render() {
-    const { store } = this.context.ctx;
+    const {
+      wrap: { store },
+    } = this.context.initialProps;
     const preloadedState = store.getState();
 
     return (

diff --git a/packages/redux-plugin/src/withRedux.jsx b/packages/redux-plugin/src/withRedux.jsx
@@ -5,6 +5,10 @@ import hoistStatics from 'hoist-non-react-statics';
 import { STORE_KEY } from './const';
 
 export const withRedux = (makeStoreClient) => {
+  // store redux store so everytime wrap's getInitialProps got called
+  // doesn't create new redux store
+  let storedReduxStore;
+
   return (Wrap) => {
     class ReduxWrapper extends React.Component {
       static displayName = `<ReduxWrapper Component={Wrap} />`;
@@ -29,41 +33,39 @@ export const withRedux = (makeStoreClient) => {
     // If Wrap's GIP doesnt return anything, we return our own context
     ReduxWrapperComponent.getInitialProps = async (ctx) => {
       const isServer = typeof window === 'undefined';
-      let reduxInitialProps = {};
 
       if (isServer) {
-        reduxInitialProps = {
-          store: makeStoreClient(isServer, {}),
-        };
+        storedReduxStore = makeStoreClient(isServer, {});
       } else {
         const initialState = document.querySelectorAll('noscript#' + STORE_KEY).item(0);
         let data = {};
 
         if (initialState) {
           const { textContent } = initialState;
           data = JSON.parse(textContent || '');
-        }
 
-        reduxInitialProps = {
-          store: makeStoreClient(isServer, data),
-        };
+          // remove element after hydrate
+          initialState.remove();
+
+          storedReduxStore = makeStoreClient(isServer, data);
+        }
       }
 
       try {
         const context = {
           ...ctx,
-          ...reduxInitialProps,
+          store: storedReduxStore,
         };
 
         if (typeof Wrap.getInitialProps === 'function') {
           const wrapInitialProps = await Wrap.getInitialProps.call(Wrap, context);
-          return { ...wrapInitialProps, ...context };
+          return wrapInitialProps;
         }
 
-        return context;
+        return null;
       } catch (err) {
         console.error('[@airy/maleo-redux-plugin]', err);
-        return context;
+        return null;
       }
     };