Connecting redux store to nextjs layout

Question

I've got a simple nextjs layout:

export default class AppLayout extends React.Component {
    render() {
        return (
            <>
                <Header />
                {this.props.children}
                <Footer />
            </>
        )
    }
}

I've been trying to wrap it with a redux store:

import React from 'react'
import Header from './header'
import Footer from './footer'
import Page from './page';
import { connect } from 'react-redux';

class AppLayout extends React.Component {
    render() {
        return (
            <>
                <Header />
                {this.props.children}
                <Footer />
            </>
        )
    }
}

const page = (props) => {
    return <AppLayout {...props} />

}

export default Page(connect(state => state)(page));

This doesn't work as I'm losing the body of each page using the layout What am I doing wrong?

The store.js is simply:

import { createStore } from 'redux';
import reducer from './reducers';

export default createStore(reducer);

Page is:

import React from 'react';
import { Provider } from 'react-redux';
import store from './store/store';

const page = (Page) => {
    return (
        class PageWrapper extends React.Component {
            render() {
                return (
                    <Provider store={store}>
                        <Page />
                    </Provider>
                )
            }
        }
    )
}
export default page;

It looks like the store injects itself as props replacing the previous props which had children from each page... which is not great as the previous props are also needed...

Any thoughts would be welcome

Answer 1

The issue is because you are not calling the AppLayout with childrens. Let me explain:

In your PageWrapper, you define this:

const page = (Page) => {
  return (
    class PageWrapper extends React.Component {
        render() {
            return (
                <Provider store={store}>
                    <Page />  // --> Page does not have children, so, you never gonna see anything
                </Provider>
            )
        }
    }
  )
}
export default page;

So, you could do many things to solve this issue, the most easiest is clean the code and you could solve whit this:

class AppLayout extends React.Component {
  render() {
    return (
        <Provider store={store}>
          <Header />
            {this.props.children}
          <Footer />
        </Provider>
    )
  }
}

export default AppLayout

Or just adding render children, like this:

const page = (Page) => {
  return (
    class PageWrapper extends React.Component {
        render() {
            return (
                <Provider store={store}>
                    <Page>
                      { this.props.children }
                    </Page>
                </Provider>
            )
        }
    }
  )
}

export default page;