將Redux Store連接到NextJS布局

Question

我有一個簡單的nextjs布局：

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

我一直在嘗試用redux存儲包裝它：

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來調用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;