React Nextjs 路由通过 Redux Store答案

【问题标题】：React Nextjs routing passing Redux StoreReact Nextjs 路由通过 Redux Store
【发布时间】：2018-10-03 12:13:39
【问题描述】：

我有一个 react 应用程序，它使用 redux 存储来保存数据库中的数据。主页可以通过 redux 存储访问这些数据。其他页面无法访问此数据。我意识到我需要使用 Provider 组件并尝试过，但是我认为结构有问题，因为我使用 nextjs 进行路由，并且没有包含索引页面上的代码。

  //index.js
  
  render() {
    return (
        <Provider store={store}>
            <p>My Page Data</p>
        </Provider>
    );
  }

我看到的所有示例都使用了一个组件，但我使用的模板没有使用该组件，而是直接从索引页面导出 html。我如何将 index.js 页面作为顶级组件（包含提供程序），然后将所有页面作为其子项（以便他们可以访问商店）。我正在使用 React 16.3.1

【问题讨论】：

标签： javascript reactjs react-redux nextjs

【解决方案1】：

您应该使用用Provider 包装您的页面的HoC。

如果请求来自服务器 - 创建新存储并将其保存在客户端的全局变量中。每次使用客户端路由（例如，'next/link'）时，它都会从全局变量中获取此存储并传递给另一个页面的Provider 组件。

Next.js 团队已经在this example 撰写和评论。

因此，您的典型页面应如下所示：

import withRedux from './utils/withRedux'

const SomePage = props => {
    return (
         <SomeLayout>
             <SomeContainer />
         </SomeLayout>
    )
}

export default withRedux()(SomePage)

【讨论】：