我正在尝试创建redux存储的可导出包。这是代码：
import React from "react";
import { Provider } from "react-redux";
import { ErrorPage } from "../components/shared";
import { MyCoreApplication } from "./MyCoreApplication";
import { configureStore } from "../tools/configureStore";
import { createCoreHelp } from "./createCoreHelp";
export const MyCore = ({ withLogs, applicationSagas, applicationReducers, app, cookieInfo }) => {
const help = createCoreHelp(applicationSagas, applicationReducers, app);
if (help.error) return <ErrorPage errorMessage={help.error} tooltipMessage={help.tooltip} />;
else {
const store = configureStore(withLogs, applicationSagas, applicationReducers);
return (
<Provider store={store}>
<MyCoreApplication app={app} cookieInfo={cookieInfo} />
</Provider>
);
}
};MyCoreApplication相同：
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { IntlProvider } from "react-intl";
import { BrowserRouter as Router } from "react-router-dom";
import { CookieBar, ErrorPage, LoadingSpinner, Notification } from "../components/shared";
import { getConfig, getConfigStore, fetchConfigEnded, isMobileMode, setMobileMode } from "../modules/configuration";
import { getLocale, setLocale, getMessages, fetchMessages } from "../modules/language";
export const MyCoreApplication = ({ app, cookieInfo }) => {
const dispatch = useDispatch();
const config = useSelector(getConfigStore);
const configLoaded = useSelector(fetchConfigEnded);
const mobileMode = useSelector(isMobileMode);
const messages = useSelector(getMessages);
const locale = useSelector(getLocale);
const actions = {
getConfig: () => dispatch(getConfig()),
setLocale: (locale) => dispatch(setLocale(locale)),
fetchMessages: (locale) => dispatch(fetchMessages(locale)),
setMobileMode: (checkMobile) => dispatch(setMobileMode(checkMobile)),
};
if (config === null && !configLoaded) dispatch(getConfig());
else {
if (!locale && config) actions.setLocale(config.defaultLanguage);
}
return config ? (
<IntlProvider messages={messages} locale={locale} defaultLocale={config.defaultLanguage}>
<Notification />
<Router>{app}</Router>
{cookieInfo && cookieInfo.useCookie && cookieInfo.infoLink && <CookieBar infoLink={cookieInfo.infoLink} />}
</IntlProvider>
) : configLoaded ? (
<ErrorPage />
) : (
<LoadingSpinner />
);
};我的包的目标是构建一个库，用于创建redux存储，从自定义应用程序接收sagas和reducer。在这种模式下，使用此库的开发人员不必创建存储，因为模块已经创建好了。在这个项目中，我使用webpack，在运行build-and-pack-npm命令后，我得到了一个.tgz文件，我在创建反应应用程序项目中使用该文件作为依赖项。在这个创建反应应用程序项目中，我以以下模式使用我的包：
import React from "react-dom";
import ReactDOM from "react-dom";
import { MyCore } from "my_core";
import { appSagas } from "./store/appSagas";
import { appReducers } from "./store/appReducers";
import { App } from "./container/App";
import "./styles/index.scss";
const wrapper = document.getElementById("container");
wrapper &&
ReactDOM.render(
<MyCore
withLogs={true}
applicationSagas={appSagas}
applicationReducers={appReducers}
app={<App />}
/>,
wrapper
);这是应用程序代码：
import React from "react";
import { Layout } from "antd";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { MyHeader as Header } from "../components/MyHeader.jsx";
import { Components } from "my_core";
const { MyFooter: Footer } = Components;
const { Content } = Layout;
export const App = () => (
<Layout>
<Router>
<Header />
<Content>
<Switch>
<Route exact path="/">
hello
</Route>
</Switch>
<Footer />
</Content>
</Router>
</Layout>
);最后，在MyHeader中，我使用useSelector，如下代码所示：
import React from "react";
import { useSelector } from "react-redux";
import { Utility } from "my_core";
const { configUtils } = Utility;
export const MyHeader = () => {
const mobileMode = useSelector(configUtils.isMobileMode);
return mobileMode ? <div>Mobile Header</div> : <div>Desktop Header</div>;
};当我开始创建react应用程序项目时，我遇到了这个错误：
useSelector() Error: Could not find react-redux context value; please ensure the component is wrapped in a <Provider>
如果在MyCore包项目中编写相同的代码，也可以正常工作。我该如何解决这个问题？
在github.com/iBobo5/myCore.git链接中，您可以找到myCore项目。只需运行npm安装和npm运行导出即可获得.tgz文件。一旦在创建反应应用程序中创建了副本；测试"；使用react和react dom依赖项进行项目和安装。其他依赖项由库安装。"内部"；测试"；项目试图替换如上所示的导入，并在组件内部使用useSelector或useDispatch。通过这种方式，你可以复制我的问题
问题可能是您的package.json中的react redux是一个依赖项，而不是peerDependency。因此，在使用库的应用程序中可能会有两个版本，这会导致您描述的错误。