Javascript 如何使用Redux表示物料UI抽屉？

我正在尝试实现Drawer，它将显示在左侧，并使用Redux保存Drawer的状态。但不幸的是，我做错了什么，我的onClick事件没有反应。代码：
减速器：

import{NEW_DATA_LOADED，DRAWER_TOGGLED}来自“../actions/types”；
从“../store”导入{initialState}；
导出默认函数rootReducer（state=initialState，action）{
console.log（状态）；
控制台日志（操作）；
开关（动作类型）{
箱子抽屉已切换：{
返回{categories:state.categories，authors:state.authors，articles:state.articles，drawerToggled:action.value}；
}
案例新数据加载：{
const keyValue=action.keyValue；
const content=action.content；
控制台日志（操作）；
let newState={categories:state.categories，authors:state.authors，articles:state.articles，drawerToggled:state.drawerToggled}；；
newState[keyValue]=内容；
返回新闻状态；
}
违约：
返回状态；
}
}

creators.js:

import{NEW_DATA_LOADED，DRAWER_TOGGLED}来自“/types”；
const newDataLoaded=（key，content）=>（{type:NEW\u DATA\u LOADED，content:content，keyValue:key}）；
const drawerToggled=（open）=>（{type:DRAWER\u TOGGLED，value:open}）；
导出{newDataLoaded，drawerToggled}；

store.js:

从“redux”导入{createStore，compose，applyMiddleware}；
从“./reducers/root”导入rootReducer；
从“redux thunk”导入redux thunk；
const initialState={articles:[]，authors:[]，categories:[]，drawerToggled:false}；
导出默认函数configStore（）{
返回createStore(
减根剂，
初始状态，
谱写(
applyMiddleware（ReduxThunk），
window.devToolsExtension？window.devToolsExtension（）：f=>f
)
);
}
导出{initialState}；

和NavBar.js:

从“React”导入React；
从“@material ui/core”导入{AppBar，Toolbar}；
从“@material ui/icons/Face”导入FaceIcon；
从“@material ui/icons/Menu”导入菜单图标；
从“物料界面/图标按钮”导入图标按钮；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/List”导入列表；
从“@material ui/styles/makeStyles”导入makeStyles；
从“react Router dom”导入{BrowserRouter as Router}；
从“@material ui/core/ListItemText”导入ListItemText；
从“./BackToTopButton/BackToTopButton”导入BackToTopButton；
从'react redux'导入{connect}；
从“../../actions”导入{toggleDrawer}；
导入“/NavBar.css”；
const useStyles=makeStyles（主题=>({
名单：{
宽度：250
},
完整列表：{
宽度：“自动”
},
论文：{
背景：“485461”
}
}));
功能导航栏（道具）{
const toolbar=React.createRef（）；
让toolbarElement=props.article==true？：；
let button=null；
如果（props.article===true）{
按钮=；
}
常量类=使用样式；
const navbar_links=[[“主页”、“/”]、[“类别”、“/Categories”]、[“您感兴趣的帖子”、“/interest”]、[“您的收件箱”、“/Inbox”]、[“注册帐户”、“/registration”]；
常量侧列表=(
{navbar_links.map（（文本）=>(
{text[0]}
))}
);
const-toggleDrawer=（打开）=>{props.toggleDrawer（打开）}；
const drawerToggled=props.drawerToggled；
返回(
onClick={（）=>toggleDrawer（true）}
根据代码，mapDispatchToProps中的toggleDrawer实际上应该在创建者中进行抽屉式切换，如下所示：

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

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

如果这不能解决您的问题，那么设置代码沙盒可能会帮助人们更好地解决您的问题。
谢谢，但不幸的是，这对我没有帮助。