从 Gatsby 应用程序的多个页面读取和写入 Redux 存储

Question

我的应用程序是这样的：

盖茨比计划

index.tsx - 应用程序的入口点 - 我调用

<Provider store={store}>
   <HomePage />
</Provider>

HomePage.js 用途mapStateToProps与用途connect(mapStateToProps)(HomePage)

当然，在我的主页中，我使用了多个 React 组件。我可以利用该商店，读取/写入该商店上发生的任何事情HomePage。

在我的主页上，我有指向 的链接ActivityPage。一旦我点击此页面并登陆那里 - 问题就开始了。

ActivityPage 使用多个子组件来完成任务。如何从 ActivityPage 访问读/写？

我无法useDispatch在商店中写入甚至读取。我可以在我的 ReactDev 工具上看到该商店，但在尝试读/写时，我收到 11 个错误，大部分是沿着我需要用以下内容包装组件的思路：<Provider>

我在 Stack Overflow 上阅读了不同的解决方案，这表明我需要拥有mapStateToProps并使用connect需要访问商店的任何组件。

这是行不通的，因为我特别希望从“新页面”访问商店。我需要为我的子页面创建另一家商店吗？请帮助。 :

Answer 1

您的组件必须位于 reduxProvider组件内部才能使用 redux hooksuseSelector和useDispatch/或connectHOC。

在典型的 React 应用程序中，您会将 放置Provider在组件中App，它是所有内容的父级。然而，Gatsby 使用不同的设置，其中每个页面完全独立，因此没有共享父级可以放置Provider.

Gatsby 拥有的是一个 API，用于通过在配置文件中定义函数来覆盖自定义行为。您可以将大量文件放置在应用程序的根目录中、package.json与src. 我们在这里将使用的两个是gatsby-browser.js，它控制客户端，以及gatsby-ssr.js，它控制通过服务器端渲染创建静态 HTML 页面。这两个文件都支持一个名为wrapRootElement.

我们使用该wrapRootElement函数将 Redux 提供程序作为每个页面的包装器。由于我们在两个文件中使用相同的函数，因此官方的“using-redux”示例在单独的文件中定义该函数并将其导入到两个配置中。wrap-with-provider.js不是一个特殊的文件名，它只是函数的持有者。

函数wrapRootElement接收element作为与 prop 类似的 prop children。我们的函数创建一个商店实例并返回一个Provider带有该商店的 aelement作为其子项。我们正在这个函数中创建存储，因此如果您当前的 redux 文件正在导出创建的store常量，您将需要导出一个可调用函数来创建存储。您可以在这里查看他们的示例。

包装与provider.js

import React from "react"
import { Provider } from "react-redux"

import createStore from "./src/state/createStore"

// eslint-disable-next-line react/display-name,react/prop-types
export default ({ element }) => {
  // Instantiating store in `wrapRootElement` handler ensures:
  //  - there is fresh store for each SSR page
  //  - it will be called only once in browser, when React mounts
  const store = createStore()
  return <Provider store={store}>{element}</Provider>
}

同样，该文件本身不会操纵 Gatsby 行为。我们需要导出它的值并将其分配给配置文件中的特殊变量来执行此操作。以下是这些文件：

gatsby-browser.js

import wrapWithProvider from "./wrap-with-provider"
export const wrapRootElement = wrapWithProvider

gatsby-ssr.js

import wrapWithProvider from "./wrap-with-provider"
export const wrapRootElement = wrapWithProvider

两者内容相同。我们所做的就是导入我们创建的函数wrap-with-provider.js并将其分配给控制行为的特殊命名变量wrapRootElement。