将 redux store 连接到 nextjs 布局

Question

我有一个简单的 nextjs 布局：

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

我一直在尝试用 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));

这不起作用，因为我正在使用布局丢失每个页面的正文我做错了什么？

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;

看起来商店将自己作为 props 注入，替换了以前的 props，每个页面都有子 props...这不是很好，因为还需要以前的 props...

欢迎任何想法

Answer 1

问题是因为您没有使用 children 调用 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

或者只添加渲染 children，像这样：

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

export default page;

将 redux store 连接到 nextjs 布局

Connecting redux store to nextjs layout

javascript

reactjs

react-redux

next.js