Я получаю следующую ошибку после реализации пользовательского макета для реакции-администратора:
Violation: Could not find "store" in the context of "Connect(CustomMenu)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(CustomMenu) in connect options.
Вот что я встроил в свое приложение:
import React, {Component} from "react"
import {Admin, Resource} from "react-admin"
import buildGraphQLProvider from "ra-data-graphql-simple"
import Dashboard from "./course-dashboard.js"
import {PostsList} from "../components/posts"
import {withStyles} from "@material-ui/core/styles"
import customRoutes from "../components/custom-routes.js"
import customLayout from "../components/custom-layout.js"
import {styles} from "../styles.js"
class App extends Component {
constructor() {
super()
this.state = {dataProvider: null}
}
componentDidMount() {
buildGraphQLProvider({
clientOptions: {
uri: http://localhost/graphql"
}
}).then(dataProvider => this.setState({dataProvider}))
}
render() {
const {dataProvider} = this.state
if (!dataProvider) {
return <div>Loading</div>
}
return (
<Admin
appLayout = {customLayout}
customRoutes = {customRoutes}
dashboard = {Dashboard}
dataProvider = {dataProvider}>
<Resource name = "Post" list = {PostsList} />
</Admin>
)
}
}
export default withStyles(styles)(App)
Пользовательский макет
import React from "react"
import {Layout} from "react-admin"
import CustomSidebar from "./custom-sidebar"
import CustomMenu from "./custom-menu.js"
const MyLayout = props => (
<Layout
{...props}
sidebar = {CustomSidebar}
menu = {CustomMenu}
/>
)
export default MyLayout
Пользовательское меню. Эта страница выдает ошибку.
import React from "react"
import {connect} from "react-redux"
import {MenuItemLink, getResources, Responsive} from "react-admin"
import {withRouter} from "react-router-dom"
const CustomMenu = ({resources, onMenuClick, logout}) => (
<div>
{resources.map(resource => (
<MenuItemLink
key = {resource.name}
to = {`/${resource.name}`}
primaryText = {resource.name}
onClick = {onMenuClick}
/>
))}
<MenuItemLink
to = "/custom-route"
primaryText = "Miscellaneous"
onClick = {onMenuClick}
/>
<Responsive
small = {logout}
medium = {null} // Pass null to render nothing on larger devices
/>
</div>
)
const mapStateToProps = state => ({
resources: getResources(state)
})
export default withRouter(connect(mapStateToProps)(CustomMenu))
Я бы предпочел не иметь избыточности в своем основном приложении. Казалось бы, мне это не понадобится, так как у меня работал react-admin, прежде чем пытаться его настроить.
Хотя вопросы немного устарели, для тех, кто все еще натыкается на проблему:
Да, вы должны включить пакеты react-redux
и redux
, а также убедиться, что вы обновили их до последних версий, потому что в противном случае это сообщение об ошибке все еще появляется.
Вам необходимо установить эти пакеты, react-redux
зависит от redux
. Как вы можете видеть выше, меню подключено к хранилищу избыточности, и именно поэтому они необходимы.
Можете ли вы уточнить, что вы подразумеваете под «включить реакцию-редукцию и редукцию»? Что вы включаете из этих библиотек?