0

我的应用是这样的：

盖茨比项目

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我需要访问商店的任何组件。

这不起作用，因为我特别希望从“新页面”访问商店。我需要去为我的子页面创建另一个商店吗？请帮忙。 错误堆栈跟踪：

4

2 回答 2

7

您的组件必须在 reduxProvider组件内才能使用 redux 钩子useSelector和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 的childrenprop。我们的函数创建一个 store 实例并返回一个Provider带有element作为其子元素的 store 的 a。我们在这个函数中创建了 store，所以如果你当前的 redux 文件正在导出一个 createdstore作为常量，你需要导出一个创建 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 行为。我们需要导出它的值并将其分配给配置文件中的特殊变量来执行此操作。以下是这些文件：

盖茨比浏览器.js

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

盖茨比-ssr.js

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

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

于 2021-03-01T00:16:44.363 回答
0

已经发布的答案和评论中发布的 Freecodecamp 链接都是非常有用的资源，但是对于我的特定用例，我发现查看 Redux 上的 Gatsby 存储库最有帮助”：https ://github.com/gatsbyjs/gatsby/树/master/examples/using-redux

此外，我最终意识到 sessionStorage 更适合我的用例，因为我试图存储页面刷新之外的数据，并且我没有使用 Redux 提供的其他功能。您可以在此处阅读有关 localStorage 的更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage 以及 Redux 与本地存储之间的区别：Why redux 而不是 session storage

此外，如果您使用 Redux，我强烈建议您使用 redux-devtools 扩展进行调试，您可以在此处安装软件包：https ://www.npmjs.com/package/@redux-devtools/extension和浏览器扩展： https： //chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

于 2022-01-27T14:12:22.523 回答