将 redux 存储连接到 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。让我解释一下：

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