Javascript 将redux商店连接到nextjs布局

我有一个简单的nextjs布局：

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

第页为：

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;

从“React”导入React；
从'react redux'导入{Provider}；
从“./store/store”导入存储；
常量页面=（页面）=>{
返回(
类PageWrapper扩展了React.Component{
render（）{
返回(
)
}
}
)
}
导出默认页面；

它看起来像商店注入自己的道具取代以前的道具，其中有孩子从每一页。。。这不是很好，因为之前的道具也是需要的

---

任何想法都是受欢迎的

问题在于你没有给孩子们打电话。让我解释一下：

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

const page=（page）=>{
返回(
类PageWrapper扩展了React.Component{
render（）{
返回(
//-->Page没有孩子，所以你永远看不到任何东西
)
}
}
)
}
导出默认页面；

因此，您可以做很多事情来解决这个问题，最简单的是清理代码，您可以通过以下方式来解决：

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

export default AppLayout

类AppLayout扩展了React.Component{
render（）{
返回(
{this.props.children}
)
}
}
导出默认应用程序布局

或者只添加渲染子对象，如下所示：

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

export default page;

const page=（page）=>{
返回(
类PageWrapper扩展了React.Component{
render（）{
返回(
{this.props.children}
)
}
}
)
}
导出默认页面；

什么是

页面

？否则，只要

connect（state=>state）（AppLayout）

就足够了。这是加载存储的地方。我需要导出布局-您建议如何完成？您可以删除不必要的代码，如

const page…

wrapper，此组件没有做任何事情。和

connect（state=>state）

相同。只需

导出默认页面（connect（）（AppLayout））

就更清晰易懂了，谢谢，但还是一样的问题-如果添加了存储，页面的主体将丢失，只有页脚和页眉。。。如果我只导出默认的AppLayout，主体就可以了，如果我连接存储，主体就会消失。。。这是因为商店把{this.props.children}搞砸了，这是尸体被传递到的地方……啊，当然，我可以看到这个问题。基本上，当您使用

提供程序定义
常量页面=
包装时，您调用的组件没有
子组件
道具。尝试在没有包装器的情况下初始化
提供程序
，直接在AppLayout组件上执行此操作刚刚尝试了第一个更干净的版本，出现了一个错误：`不变冲突：在“Connect（AppLayout）”的上下文中找不到“store”。将根组件包装在中，或者在连接选项中将自定义的React上下文提供程序传递给和相应的React上下文使用者进行连接（AppLayout）。`是的，这是我的错，要解决它，只需使用no
Connect
函数立即导出即可！非常感谢。我还尝试了第二个选项，它不能作为引用错误：没有定义道具我想知道如果提供程序在那里，为什么不需要连接商店？我已经编辑过了。Was
this.props
，因为它在类中。如果我的回答对你有希望，别忘了标记为敬畏
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;