react-admin：如果您将 react-admin 嵌入到非 redux 应用程序中，是否需要将 redux 安装到您的应用程序中？

Question

为 react-admin 实现自定义布局后出现以下错误：

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))

我宁愿在我的主应用程序中没有 redux。看起来我不需要它，因为我在尝试自定义它之前已经有 react-admin 工作。

Answer 1

虽然问题有点老了，但对于那些仍然在这个问题上磕磕绊绊的人来说：

是的，您必须包含 react-redux 和 redux 软件包，并确保您已更新到最新版本，否则此错误消息仍然会出现。