Next.js Redux 集成在上下文或道具中找不到 "store"

Question

我目前正在尝试将我的 redux 商店集成到我的 Next.js React 应用程序中。现在唯一的问题是当我尝试在 index.js 文件中调用 connect 时。

也许这与我的应用程序的布局方式有关？我在 index.js 中尝试了 console.log(this.props) 但它似乎没有从提供商那里发送任何东西。

错误：在 "Connect(Page)" 的上下文或属性中找不到 "store"。要么将根组件包装在 a 中，要么将 "store" 作为 prop 显式传递给 "Connect(Page)".

page.js

import React from 'react';
import { Provider } from 'react-redux';
import store from '../store/store';
import Head from './head'
import Nav from './nav'

const childPage = (ChildPage) => {
    return (
        class Page extends React.Component {
            render() {
                return (
                    <Provider store={store}>
                        <div>
                            <Head />
                            <Nav />
                            <ChildPage />
                        </div>
                    </Provider>
                )
            }
        }
    )
}

export default childPage;

index.js

import React from 'react';
import { connect } from 'react-redux'
import Page from '../components/page';

export class Index extends React.Component {
  render() {
    return (
      <div>
        <div className="hero">

        </div>
        <style jsx>{`

        `}</style>
      </div>
    )
  }
}

export default connect(state => state)(Page(Index));

Answer 1

结构顺序不正确。

export default connect(state=>state)(Page(Index));

这导致 connect() > Provider > Index

export default Page(connect(state=>state)(Index));

这导致 Provider > connect() > Index

所以答案是这样的：

export default Page(connect(state=>state)(Index));

Answer 2

您可以使用 next-redux-wrapper npm 包。在您应用的 _app.js 页面上添加 withRouter hoc。

示例如下：https://github.com/galishmann/nextjs-redux-example/blob/master/pages/_app.js

Next.js Redux 集成在上下文或道具中找不到 "store"

Next.js Redux integration Could not find "store" in either the context or props

reactjs

redux

react-redux

nextjs