reactjs - 在“连接（组件）”GatsbyJs Redux 的上下文中找不到“商店”

问题描述

在尝试使用 Redux 实现全局状态存储时，我的 Gatsby Web 应用程序遇到了一些问题。我对两者都很陌生。在我使用 MobX 和“普通”React 之前。

问题是，我无法从我的组件访问我的商店的数据。我在几个教程中使用 Redux Provider 类，但是当我也使用其他提供程序时，我的情况似乎很特殊......这是我迄今为止想出的：

gatsby-ssr.js 和 gatsby-browser.js

import prepPages from "./prepPages"
export const wrapRootElement = prepPages

prepPages.js

import React from "react"
import { createGlobalStyle, ThemeProvider } from "styled-components"
import { Provider } from "react-redux"
import createStore from "./src/state/store"
import { MDXProvider } from "@mdx-js/react"
import { Table } from "./src/components"
import Theme from "./src/themes/theme"

//Provider for my global styling
const GlobalStyles = createGlobalStyle`...`

//Overriding the table component
const components = {
  table: Table
}

export default ({ element }) => {
  const store = createStore()
  return(
    <Provider store={store}>
      <MDXProvider components={components}>
        <ThemeProvider theme={Theme}>
          <GlobalStyles/>
            {element}
        </ThemeProvider>
      </MDXProvider>
    </Provider>
    )
}

store.js

import {createStore as reduxCreateStore} from "redux"

const initialState = {
  loggedIn: false,
  menuToggleOn: false,

  //other initial states
}

const reducer = (state, action, dispatch) => {
  //Toggles
  if(action.type === 'TOGGLE_MENU'){
    return {
      ...state,
      toggleMenuOn: !state.toggleMenuOn
    }
  }
  //other actions
}

const createStore = () => reduxCreateStore(reducer, initialState);
export default createStore;

组件/Nav.js

import React from 'react';
import {useStaticQuery, Link, graphql} from "gatsby";
import {NavWrapper} from "../styles";
import { Button } from "./Button";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars} from "@fortawesome/free-solid-svg-icons";
import connect from "react-redux/lib/connect/connect";
import PropTypes from "prop-types"

const NavHolder = ({loggedIn, toggleMenu, toggleMenuOn}) => {
  ...
  //defining the nav items depending on the login state
  var items;
  var cta = {};
  if(loggedIn){
    items = [
      {name: "home", ref: "/", key: 0},
      {name: "wiki", ref: "/wiki", key: 1},
      {name: "workspace", ref: "/workspace", key: 2}
    ]
  }else {
    items = [
      {name: "about", ref: "#about", key: 0},
      {name: "features", ref: "#features", key: 1},
      {name: "download", ref: "#download", key: 2},
      {name: "contact", ref: "#contact", key: 3}
    ];
    cta = {exists: true, name: "login"}
  }
  //mapping the nav items and adding the visible class if the menu is toggled on
  let navItems = items.map((item) =>
    <li key={item.key} className={toggleMenuOn ? "nav-item visible" : "nav-item"}>
      <a href={item.ref} className={isActive ? "active":""}>
        {item.name}
      </a>
    </li>
  )
  return (
    <NavWrapper>
      <ul>
        <li>
          <Link to="/" id="logo">...</Link>
        </li>
        {navItems}
        <li className="nav-toggle">
          <a href="/" onClick={toggleMenu}>
            <FontAwesomeIcon icon={faBars}/>
          </a>
        </li>
        {cta.exists && (
          <li className="nav-cta">
            <Button color="petrol" href="login">{cta.name}</Button>
          </li>
        )}
      </ul>
    </NavWrapper>
  )
}
NavHolder.propTypes = {
  loggedIn: PropTypes.bool.isRequired,
  menuToggleOn: PropTypes.bool.isRequired,
  toggleMenu: PropTypes.func.isRequired
}
const mapStateToProps = ({loggedIn, toggleMenuOn}) => {
  return { loggedIn, toggleMenuOn }
}
const mapDispatchToProps = dispatch => {
  return { toggleMenu: () => dispatch({ type: `TOGGLE_MENU` }) }
}

const ConnectedNav = connect(mapStateToProps, mapDispatchToProps)(NavHolder)

export const Nav = () => {
  return <ConnectedNav/>
}

我认为这可能有效，但我收到此错误：

错误：在“Connect(NavHolder)”的上下文中找不到“store”。要么将根组件包装在 Provider 中，要么将自定义 React 上下文提供者传递给 Provider，并将相应的 React 上下文消费者传递给连接选项中的 Connect(NavHolder)。

在组件错误中找不到存储

有谁知道我哪里出错了？我真的很感激任何帮助。谢谢：）

标签： reactjsreduxgatsby

reactjs - 在“连接（组件）”GatsbyJs Redux 的上下文中找不到“商店”

问题描述

解决方案

推荐阅读