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

Question

Я пытаюсь написать приложение в реакции, и я столкнулся с проблемой необходимости управлять состоянием для очень многих компонентов, поэтому я хотел использовать избыточность. Из того, что я прочитал, 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 здесь бесполезен