2

我目前正在尝试将我的 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));
4

2 回答 2

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));
于 2017-11-16T17:35:47.070 回答
0

你可以使用next-redux-wrappernpm 包。在您的应用程序页面上添加withRouterhoc 。_app.js

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

于 2018-12-15T20:33:00.280 回答