React & Redux: невозможно прочитать свойство undefined

Я пытаюсь написать приложение в React, и я столкнулся с проблемой управления состоянием для очень многих компонентов, поэтому я хотел использовать redux. Из того, что я прочитал, Redux не работает с корневым компонентом, поэтому я создал промежуточный компонент, назвав его «оболочкой», который будет обертывать все и управлять состоянием моего приложения. Итак, теперь у меня есть исходный корневой компонент и компонент-оболочка. Я пытаюсь получить некоторые реквизиты в этом компоненте-оболочке с помощью redux, но реквизиты по какой-то причине не заполнены, и я не могу это понять.

Вот мой код:

import * as React from 'react'
import { Provider } from "react-redux";
import { connect } from "react-redux";
//SPFX references
import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';

//custom references
import { IRootProps } from '../props/IRootProps'
import { IRootState } from '../states/IRootState'
import { ITile, ITileHeader, ITileItem } from '../props/ITileStructure'
import store from '../main/store'
import { openPanel, closePanel } from '../actions/panelAction'

//Styles references
import rootStyles from '../styles/RooComponent.module.scss'
import commonStyles from '../styles/common.module.scss'

//Components references
import PanelComponent from './PanelComponent'
import FooterComponent from './FooterComponent'
import DiscardChangesDialogComponent from './DiscardChangesDialogComponent'
import BladesRootComponent from './BladesRootComponent'
import TilesListComponent from './TilesListComponent'

class RootComponent extends React.Component<{}, {}>{
    tiles: ITile[] = [];

    constructor(props) {
        super(props);
    }

    render(): JSX.Element {
        return (
            <Provider store = {store}>
                <AppWrapper />
            </Provider>

        )
    }
}

class AppWrapper extends React.Component<IRootProps, IRootState>{
    tiles: ITile[] = [];

    constructor(props: IRootProps) {
        super(props);

        if (this.tiles.length === 0) {
            for (let i = 0; i < 200; i++) {
                this.tiles.push({
                    key: i,
                    tileName: 'tile ' + i,
                    tileImageUrl: 'image url ' + i,
                    tileOrder: i,
                    headers: []
                });
            }
        }
    }
    render(): JSX.Element {
        return (
            <div className = "RootComponent">
                <DefaultButton onClick = {() => this.props.panelProps.openPanel()} className = {commonStyles.defaultButton} >Configure Tiles</DefaultButton>
                <Panel
                    isOpen = {this.props.panelProps.isPanelOpen}
                    // tslint:disable-next-line:jsx-no-lambda
                    onDismiss = {() => {
                        this.setState({ showPanel: false })
                    }}
                    type = {PanelType.extraLarge}
                    headerText = "Tiles configuration"
                    hasCloseButton = {false}>
                    <PanelComponent />
                </Panel>
            </div>
        )
    }
}

let mapStateToProps = (state) => {
    return {
        panelProps: state.panel,
    };
};

let mapDispatchToProps = (dispatch) => {
    return {
        openPanel: () => {
            dispatch(openPanel());
        }
    };
};

connect(mapStateToProps, mapDispatchToProps)(AppWrapper);
export default RootComponent; 

Это код для ../main/store:

import {createStore, combineReducers} from 'redux';
import {Store} from 'redux';

import panel from "../reducers/panelReducer";
let store =  createStore(
    combineReducers({
        panel
    }),
    {}
);

export default store; 

и ../reducers/panelReduce выглядит так:

//(state, action) => 
const panelReducer = (state = {
    isPanelOpen: false
}, action) => {
    switch (action.type) {
        case "OPEN_PANEL":
            state = {
                ...state,
                isPanelOpen: true
            };
            break;
        case "CLOSE_PANEL":
            state = {
                ...state,
                isPanelOpen: false
            };
            break;
    }
    return state;
};

export default panelReducer;

Однако код выполняется, и в строке: <Panel isOpen = {this.props.panelProps.isPanelOpen} он сообщает мне, что не может получить доступ к isPanelOpen из undefined. По какой-то причине Redux подключен неправильно.

P.S Я все еще новичок в Redux, поэтому могу делать что-то не так, если кто-то может указать мне правильное направление.