Reactjs App.js响应本机RBAC登录系统问题

Reactjs 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,

我正在尝试为最初的expo应用程序构建一个基于角色的访问系统,但我已经尝试从CreateReact应用程序教程中将RBAC添加到app.js文件中。我为普通用户创建了基本组件,但我遇到了一个错误,我认为这与redux有关

运行expo start时出现的错误如下:

** 错误:在“连接(应用)”的上下文中找不到“存储”。将根组件包装在中,或在“连接选项”中将自定义的React上下文提供程序传递给和相应的React上下文使用者以进行连接(应用程序)。 **

App.js

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;