Next.js Redux 集成在上下文或道具中找不到“商店”答案

【问题标题】：Next.js Redux integration Could not find "store" in either the context or propsNext.js Redux 集成在上下文或道具中找不到“商店”
【发布时间】：2018-04-30 07:54:01
【问题描述】：

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

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

错误：在“连接（页面）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“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));

【问题讨论】：

标签： reactjs redux react-redux nextjs

【解决方案1】：

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

这里是示例：https://github.com/galishmann/nextjs-redux-example/blob/master/pages/_app.js

【讨论】：

【解决方案2】：

结构顺序不正确。

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

【讨论】：