react-admin: Do you need to install redux to your application if you are embedding react-admin inside a non-redux app?

Question

I get the following error after implementing a custom layout for 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.

Here's what I embedded in my app:

 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)

Custom Layout

 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

Custom Menu. This page produces the error.

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

I'd rather not have redux in my main application. It would seem like I would not need it since I had react-admin working before trying to customize it.

Answer 1

Although the questions is a bit old, for the ones still stumbling upon the issue:

Yes, you have to include react-redux and redux packages and also make sure you have updated to the latest versions, because otherwise this error message still apears.