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;
}
};