React＆Redux：无法读取undefined的属性

Question

我正在尝试编写一个应用程序，我遇到了必须管理这么多组件的状态的问题，所以我想使用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的初学者，所以如果有人能指出我正确的方向，我可能会做错事。

Answer 1

事实上，你没有在AppWrapper中使用连接的RootComponent组件

你可以创建一个常量AppWrapperConnected：const AppWrapperConnected = connect(mapStateToProps, mapDispatchToProps)(AppWrapper);并在<AppWrapperConnected/>中使用RootComponent

此外，我认为如果你将RooComponent和AppWrapper拆分为两个单独的文件将更容易维护

另一个建议是像这样重写mapStateToProps

let mapStateToProps = (state) => state.panel

所以你可以直接使用this.props.isPanelOpen，我认为panelProps在这里没用