Подключение магазина редуксов к макету nextjs

Question

У меня есть простой макет nextjs:

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

Я пытался обернуть его магазином с редуксом:

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

Это не работает, так как я теряю тело каждой страницы, используя макет Что я делаю не так?

store.js - это просто:

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

export default createStore(reducer);

Страница:

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;

Похоже, что магазин внедряет себя в качестве реквизита, заменяя предыдущие реквизиты, у которых были дочерние элементы на каждой странице ... что не так уж и хорошо, так как предыдущие реквизиты также необходимы ...

Любые мысли приветствуются

Answer 1

Проблема в том, что вы не звоните AppLayout с детьми. Позвольте мне объяснить:

В вашем PageWrapper вы определяете это:

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;

Итак, вы могли бы сделать много вещей, чтобы решить эту проблему, самый простой - очистить код, и вы могли бы решить с этим:

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

export default AppLayout

Или просто добавление дочерних элементов для рендеринга, например:

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

export default page;