React-admin: нужно ли вам устанавливать redux в ваше приложение, если вы встраиваете react-admin в приложение без redux?

Я получаю следующую ошибку после реализации пользовательского макета для реакции-администратора:

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, прежде чем пытаться его настроить.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
424
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хотя вопросы немного устарели, для тех, кто все еще натыкается на проблему:

Да, вы должны включить пакеты react-redux и redux, а также убедиться, что вы обновили их до последних версий, потому что в противном случае это сообщение об ошибке все еще появляется.

Можете ли вы уточнить, что вы подразумеваете под «включить реакцию-редукцию и редукцию»? Что вы включаете из этих библиотек?

JabbaWook 23.02.2021 11:06

Вам необходимо установить эти пакеты, react-redux зависит от redux. Как вы можете видеть выше, меню подключено к хранилищу избыточности, и именно поэтому они необходимы.

Kia Kaha 23.02.2021 17:37

Другие вопросы по теме