diff --git a/packages/css-plugin/src/pageWithStyles.js b/packages/css-plugin/src/pageWithStyles.js index b7bdb98..ef830b1 100644 --- 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 = ``; - 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 index 1b83b94..fba5522 100644 --- 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 index 59503dc..f7d9bc5 100644 --- 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 = ``; @@ -29,12 +33,9 @@ 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 = {}; @@ -42,28 +43,29 @@ export const withRedux = (makeStoreClient) => { 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; } };