Reactjs App.js响应本机RBAC登录系统问题
我正在尝试为最初的expo应用程序构建一个基于角色的访问系统,但我已经尝试从CreateReact应用程序教程中将RBAC添加到app.js文件中。我为普通用户创建了基本组件,但我遇到了一个错误,我认为这与redux有关 运行expo start时出现的错误如下: ** 错误:在“连接(应用)”的上下文中找不到“存储”。将根组件包装在中,或在“连接选项”中将自定义的React上下文提供程序传递给和相应的React上下文使用者以进行连接(应用程序)。 ** App.jsReactjs App.js响应本机RBAC登录系统问题,reactjs,redux,frontend,expo,rbac,Reactjs,Redux,Frontend,Expo,Rbac,我正在尝试为最初的expo应用程序构建一个基于角色的访问系统,但我已经尝试从CreateReact应用程序教程中将RBAC添加到app.js文件中。我为普通用户创建了基本组件,但我遇到了一个错误,我认为这与redux有关 运行expo start时出现的错误如下: ** 错误:在“连接(应用)”的上下文中找不到“存储”。将根组件包装在中,或在“连接选项”中将自定义的React上下文提供程序传递给和相应的React上下文使用者以进行连接(应用程序)。 ** App.js import React,
import React, { useEffect, useState, Component } from 'react';
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer} from "@react-navigation/native";
import { createStackNavigator} from "@react-navigation/stack";
import { Platform } from 'react-native';
import { useDespatch, useSelector, connect, Provider } from "react-redux";
import { Router, Switch, Route, Link } from "react-router-dom";
import { AppLoading} from "expo";
import { decode, encode } from 'base-64';
import { navigationRef } from "./RootNavigation";
import { LoginScreen, home, RegistrationScreen } from './screens';
import newsDetail from "./components/newsDetail";
import AboutSustScub from "./components/about";
import SearchScubaSchool from "./components/user/searchSchool";
import MarineLife from "./components/general/marineLife";
import Profile from "./components/general/profile";
import Messenger from "./components/general/messenger";
import HeaderMenu from "./components/header";
import Footer from './components/footer';
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import { logOut } from "./actions/auth";
import { clear_Message } from "./actions/message";
import { history } from "./helpers/history";
const Stack = createStackNavigator();
class App extends Component {
constructor(props) {
super(props);
this.logOut = this.logOut.bind(this);
this.state = {
showUserLevelAccess: false,
showSchoolLevelAccess: false,
showAdminLevelAccess: false,
showSuperUserAccess: false,
currentUser: undefined,
};
history.listen((location) => {
props.dispatch(clearMessage());
});
}
componentDidMount() {
const user = this.props.user;
if (user) {
this.setState({
currentUser: user,
showUserLevelAccess: user.userRoles.includes(1),
showSchoolLevelAccess: user.userRoles.includes(2),
showSiteAdminLevelAccess: user.userRoles.includes(3),
showSuperUserLevelAccess: user.userRoles.includes(4),
});
}
}
logOut() {
this.props.dispatch(logout());
}
render() {
const {
currentUser,
showUserLevelAccess,
showSchoolLevelAccess,
showSiteAdminLevelAccess,
showSuperUserLevelAccess
} = this.state;
return (
<NavigationContainer>
<Stack.Navigator>
state.userToken == null ? (
<>
// if no user token is found user will be displayed login or regisration screens
<Stack.Screen name="Login" component={LoginScreen}/>
<Stack.Screen name="Registration" component={RegistrationScreen}/>
</>
) : (
<>
// If user token found they will be displayed the below components
{ currentUser && (
<Stack.Screen
name="Homepage"
component={HomePage}
options={{
header: () => <HeaderMenu headerDisplay="Home page"/>
}}
/>
)}
{ currentUser && (
<Stack.Screen
name="newsDetail"
component={newsDetail}
options={{
header: () => <HeaderMenu headerDisplay="Scuba News"/>
}}
/>
)}
{ currentUser && (
<Stack.Screen
name="about"
component={AboutSustScub}
options={{
header: () => <HeaderMenu headerDisplay="About Sustainable Scuba"/>
}}
/>
)}
{ currentUser && (
<Stack.Screen
name="SearchScubaSchool"
component={SearchScubaSchool}
options={{
header: () => <HeaderMenu headerDisplay="Search for your perfect scuba school"/>
}}
/>
)}
{ currentUser && (
<Stack.Screen
name="MarineLife"
component={MarineLife}
options={{
header: () => <HeaderMenu headerDisplay="Marine life educational information"/>
}}
/>
)}
{ currentUser && (
<Stack.Screen
name="Profile"
component={Profile}
options={{
header: () => <HeaderMenu headerDisplay="Profile with PADI information"/>
}}
/>
)}
{ currentUser && (
<Stack.Screen
name="Messenger"
component={Messenger}
options={{
header: () => <HeaderMenu headerDisplay="Personal messages and notifications"/>
}}
/>
)}
</>
)
</Stack.Navigator>
</NavigationContainer>
);
}
}
function mapStateToProps(state){
const { user } = state.auth;
return {
user,
};
}
export default connect(mapStateToProps)(App);
这与我的index.js文件以及应用程序是如何传入的有关吗?由于我使用的是expo仿真器,所以除了错误消息之外,我无法获得任何输出
import { registerRootComponent} from "expo";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import "./index.css";
import App from "./App";
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is et up appropriately
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
registerRootComponent(App);
import { createStore, applyMiddleware} from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const middleware = [thunk];
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(...middleware))
);
export default store;