Question

我有一个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

Answer 1

你应该使用用Provider包裹页面的HoC。

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

已由this example中的Next.js小组撰写并评论过。

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

import withRedux from './utils/withRedux'

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

export default withRedux()(SomePage)

React Nextjs路由传递Redux Store

1 个答案: