我正在尝试用 React 编写应用程序，并且面临着必须管理如此多组件的状态的问题，因此我想使用 Redux。据我所知，Redux 不适用于根组件，因此我创建了一个名为“wrapper”的中间组件，它将包装所有内容并管理我的应用程序的状态。所以现在我有了我的原始根组件和一个包装器组件。我正尝试使用 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。​​由于某种原因，Redux 未以正确的方式连接。

P.S 我还是 Redux 的初学者，所以我可能做错了，如果有人能指出正确的方向。