Как открыть боковую панель материала с помощью React с Redux и Thunk Middleware в моем приложении ASP.NET Core?

Question

Я новичок в React с Redux и пытаюсь не только сделать свой код немного чище, но и внедрить базовые функциональные возможности.У меня есть Material UI Drawer , который я хотел бы открыть с помощью кнопки, которую я могу разместить в любом месте.Чтобы это произошло, мне нужно отрегулировать общее состояние ящика при нажатии кнопки.Я начал создавать это решение, но изо всех сил стараюсь подписать компонент «Ящик» на состояние, и мне нужна помощь.

Не думаю, что я так далек от того, чтобы иметь егоработает, но я отнюдь не там.Как вы увидите из моего кода, я также настроил свои папки для разделения моих действий и редукторов для простоты использования по мере роста приложения.

src / Index.js

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  rootElement);

registerServiceWorker();

src / components / Sidebar.js

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from "react-router-dom";
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import RequirementIcon from '@material-ui/icons/FindInPage';
import FixtureIcon from '@material-ui/icons/Waves';
import OfferIcon from '@material-ui/icons/HowToVote';
import DashboardIcon from '@material-ui/icons/Home';
import CompaniesIcon from '@material-ui/icons/Business';
import VesselIcon from '@material-ui/icons/DirectionsBoat';
//Connect to store
import { connect } from 'react-redux';
import { actionCreators } from '../store/actions/sidebarAction';

const styles = {
    list: {
        width: 250,
    },
    fullList: {
        width: 'auto'
    },
};

class Sidebar extends React.Component {
    /* Somehow I need to wire the global state to adjust this event here.    
    toggleDrawer = (side, open) => () => {
        this.setState({
            [side]: open,
        });
    };*/

    render() {


const classes = useStyles();
  const [state, setState] = React.useState({
    left: false
  });

  const toggleDrawer = (side, open) => event => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }

    setState({ ...state, [side]: open });
  };

        const sideList = (
            <div className={classes.list}>
                <List>
                    <ListItem button component={Link} to="/">
                        <ListItemIcon>
                            <DashboardIcon />
                        </ListItemIcon>
                        <ListItemText primary="Dashboard" />
                    </ListItem>
                    <Divider />
                    <ListItem button component={Link} to="/Requirements/">
                        <ListItemIcon>
                            <RequirementIcon />
                        </ListItemIcon>
                        <ListItemText primary="Requirements" />
                    </ListItem>   
                    <ListItem button component={Link} to="/Fixtures/">
                        <ListItemIcon>
                            <FixtureIcon />
                        </ListItemIcon>
                        <ListItemText primary="Fixtures" />
                    </ListItem>   
                    <ListItem button component={Link} to="/Offers/">
                        <ListItemIcon>
                            <OfferIcon />
                        </ListItemIcon>
                        <ListItemText primary="Offers" />
                    </ListItem>
                    <Divider />
                    <ListItem button component={Link} to="/Vessels/">
                        <ListItemIcon>
                            <VesselIcon />
                        </ListItemIcon>
                        <ListItemText primary="Vessels" />
                    </ListItem>
                    <ListItem button component={Link} to="/Companies/">
                        <ListItemIcon>
                            <CompaniesIcon />
                        </ListItemIcon>
                        <ListItemText primary="Companies" />
                    </ListItem>
                </List>               
            </div>
        );
        return (
            <div>                
                <Drawer>
                    <div tabIndex={0} role="button">
                        {sideList}
                    </div>
                </Drawer>
            </div>
        );
    }
}

Sidebar.propTypes = {
    classes: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => {
    return {
        show: state.show
    }
};

//export default withStyles(styles)(Sidebar);
export default connect(mapStateToProps)(withStyles(styles)(Sidebar));

src / Components / MenuButton.js

Этокнопка, которую я хотел бы открыть и закрыть меню, если мне это нужно.Идея состоит в том, что эту кнопку можно разместить в любом месте моего приложения.

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../store/actions/sidebarAction';

const MenuButton = props => (
    <div>        
        <button type="button" onClick={props.open}>Open</button>
        <button type="button" onClick={props.close}>Close</button>
    </div>
);

export default connect(
    state => state.sidebar,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(MenuButton);

src / Store / configureStore.js

import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import * as Sidebar from './reducers/sidebarReducer';

export default function configureStore(history, initialState) {
    const reducers = {
        sidebar: Sidebar.reducer
    };

    const middleware = [
        thunk,
        routerMiddleware(history)
    ];

    // In development, use the browser's Redux dev tools extension if installed
    const enhancers = [];
    const isDevelopment = process.env.NODE_ENV === 'development';
    if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {
        enhancers.push(window.devToolsExtension());
    }

    const rootReducer = combineReducers({
        ...reducers,
        routing: routerReducer
    });

    return createStore(
        rootReducer,
        initialState,
        compose(applyMiddleware(...middleware), ...enhancers)
    );
}

src /store / actions / sidebarActions.js

const openMenuType = "SIDEBAR_OPEN";
const closeMenuType = "SIDEBAR_CLOSE";

export const actionCreators = {
    open: () => ({ type: openMenuType }),
    close: () => ({ type: closeMenuType })    
};

src / store / redurs / sidebarReducers.js

const openMenuType = "SIDEBAR_OPEN";
const closeMenuType = "SIDEBAR_CLOSE";

const initialState = {
    show: false
}
export const reducer = (state, action) => {
    state = state || initialState;
    console.log(state);
    if (action.type === openMenuType) {
        return {
            ...state,
            show: state.show = true

        };
    }
    if (action.type === closeMenuType) {
        return {
            ...state,
            show: state.show = false
        };
    }
    console.log(state);
    return state;
};

Как видите, я 'Мы пытались разделить все эти элементы.Последняя оставшаяся часть состоит в том, чтобы кнопка действительно открывала меню, я вижу, что кнопки действительно меняют состояние, но я все еще не уверен, что они настолько чисты, насколько они могли / должны быть.Любой вклад в это приветствуется.

Спасибо