如何使用 Redux 来表示材质 UI 抽屉?

Question

我正在尝试实现抽屉，它将出现在左侧，并使用Redux保存抽屉的状态。但不幸的是，我做错了什么，我的onClick事件没有响应。代号：减速机：

import { NEW_DATA_LOADED, DRAWER_TOGGLED } from '../actions/types';
import { initialState } from '../store';
export default function rootReducer(state = initialState, action) {
console.log(state);
console.log(action);
switch (action.type) {
case DRAWER_TOGGLED: {
return { categories: state.categories, authors: state.authors, articles: state.articles, drawerToggled: action.value };
}
case NEW_DATA_LOADED: {
const keyValue = action.keyValue;
const content = action.content;
console.log(action);
let newState = { categories: state.categories, authors: state.authors, articles: state.articles, drawerToggled: state.drawerToggled };;
newState[keyValue] = content;
return newState;
}
default:
return state;
}
}

创作者.js：

import { NEW_DATA_LOADED, DRAWER_TOGGLED } from "./types";
const newDataLoaded = (key, content) => ({ type: NEW_DATA_LOADED, content: content, keyValue: key });
const drawerToggled = (open) => ({ type: DRAWER_TOGGLED, value:open });
export { newDataLoaded , drawerToggled };

店铺.js：

import { createStore, compose, applyMiddleware } from "redux";
import rootReducer from './reducers/root';
import ReduxThunk from 'redux-thunk';
const initialState = { articles:[], authors:[],categories:[],  drawerToggled: false };
export default function configStore() {
return createStore(
rootReducer,
initialState,
compose(
applyMiddleware(ReduxThunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
}
export { initialState };

和导航栏.js：

import React from 'react';
import { AppBar, Toolbar } from '@material-ui/core';
import FaceIcon from '@material-ui/icons/Face';
import MenuIcon from '@material-ui/icons/Menu';
import IconButton from 'material-ui/IconButton';
import Drawer from "@material-ui/core/Drawer";
import ListItem from "@material-ui/core/ListItem";
import List from "@material-ui/core/List";
import makeStyles from "@material-ui/styles/makeStyles";
import { BrowserRouter as Router } from "react-router-dom";
import ListItemText from "@material-ui/core/ListItemText";
import BackToTopButton from "../BackToTopButton/BackToTopButton";
import { connect } from 'react-redux';
import { toggleDrawer } from '../../actions';
import './NavBar.css';

const useStyles = makeStyles(theme => ({
list: {
width: 250
},
fullList: {
width: "auto"
},
paper: {
background: "#485461"
}
}));
function NavBar(props){
const toolbar = React.createRef();
let toolbarElement = props.article === true ? <Toolbar id="back-to-top-anchor" ref={toolbar} /> : <Toolbar />;
let button = null;
if (props.article === true) {
button = <BackToTopButton anchor={toolbar} />;
}
const classes  = useStyles;
const navbar_links = [["Home", "/"], ["Categories", "/categories"], ["Interesting Posts For You", "/interesting"], ["Your Inbox", "/inbox"], ["Register account","/registration"]];
const sideList = (
<div className={classes.list} role="presentation" onClick={props.toggleDrawer(false)}
onKeyDown={props.toggleDrawer(false)}>
<List>
{navbar_links.map((text) => (
<ListItem component="a" button key={text[0]} href={text[1]}>
<ListItemText>{text[0]}</ListItemText>
</ListItem>
))}
</List>
</div>
);
const toggleDrawer = (open) => { props.toggleDrawer(open) };
const drawerToggled = props.drawerToggled;
return (
<React.Fragment>
<Router>
<AppBar position="sticky">
<Toolbar>
<IconButton className={"menu"} aria-label="Menu" color="white"
onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Drawer
classes={{ paper: classes.paper }}
open={drawerToggled}
onClose={toggleDrawer(false)}
>
<div
tabIndex={0}
role="button"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
className={{ root: classes.root }}
>
{sideList}
</div>
</Drawer>
<section className={"rightToolBar"}>
<IconButton className={"profile"} aria-label="My profile" color={"black"} href="/profile">
<FaceIcon />
</IconButton>
</section>
</Toolbar>
</AppBar>
{toolbarElement}
</Router>
{button}
</React.Fragment>
);
}
const mapStateToProps = (state) => ({
drawerToggled:state.drawerToggled
});
const mapDispatchToProps = (dispatch) => ({
toggleDrawer: (open) => dispatch(toggleDrawer(open)),
});
export default connect(mapStateToProps, mapDispatchToProps)(NavBar);

附言这个导航栏的版本，用反应状态实现，效果很好，所以问题出在 redux 使用中的某个地方。
谁能帮我让它工作？ 代码沙盒：
https://codesandbox.io/s/github/LilJohny/BlogUI/tree/develop_4

Answer 1

onClick={((=>toggleDrawer(true(}

Answer 2

从代码中，在 mapDispatchToProps 中切换抽屉实际上应该在创建器中切换，如下所示：

toggleDrawer: (open) => dispatch(drawToggled(open)),

您可能希望重命名变量以匹配 mapDispatchToProps 中的内容，以避免混淆。

如果这不能解决您的问题，也许设置代码沙箱将帮助人们更好地解决您的问题。