Reactjs 尝试用redux制作边栏时的反应

我是一个新的反应者，试图制作一个侧边栏

到目前为止，我已经成功地接触到了减速器

// sidebarReducer.js
const sidebar = (state = { visible: false }, action) => {
switch (action.type) {
    case "SHOW":
        console.log("show"); 
        return { ...state, visible: true };
    case "HIDE":
        console.log("hide");
        return { ...state, visible: false };
 default:
    return state;
  }
};

export default sidebar;

class SidebarContainer扩展组件{
handleOpen=（）=>{
this.props.dispatch（{type:'SHOW'}）；
}
handleClose=（）=>{
this.props.dispatch（{type:'HIDE'}）；
}
handleToggle=（）=>{
const{visible}=this.props；
const{handleClose，handleOpen}=this；
如果（可见）返回handleClose（）；
handleOpen（）；
console.log（可见）；//输出：未定义。
}
render（）{
const{visible}=this.props；
const{handleToggle，handleClose}=this；
返回[
可见&&，
,
]
}
}
导出默认连接（）（SidebarContainer）；

调用handleToggle事件时，我从sidebareducer.js的console.log（“show”）中获得两个日志，从SidebarContainer.js的console.log（可见）中获得“show”和“undefined”

当“可见”为真时，将显示调光器、侧栏和汉堡组件。

---

但是因为我不知道为什么可见的是未定义的，所以它没有显示。您能告诉我原因吗？？？

您必须将组件连接到您的状态/操作

export default connect(state => ({
    visible: state.sidebar.visible
 }),
 {
   show: sidebarActions.show
 }
 )(SidebarContainer);

差不多吧

---

检查：redux文档中的mapStateToProps和mapDispatchToProps方法

您必须将组件连接到您的状态/操作

export default connect(state => ({
    visible: state.sidebar.visible
 }),
 {
   show: sidebarActions.show
 }
 )(SidebarContainer);

差不多吧

---

检查：redux文档中的mapStateToProps和mapDispatchToProps方法

在

渲染

中，您正在从

此导入
可见的
。道具
：

const { visible } = this.props;

但是它们是如何传递到组件道具的呢

visible
值存储在Redux中，应该连接到React组件，这样您就可以使用它了

如您所见，没有任何连接：

export default connect()(SidebarContainer);

所以你需要这样连接它：

const mapStateToProps = state => {
  return {
    visible: state.REDUCER_NAME.visible // propably sidebar
  }
}

export default connect(mapStateToProps, null)(SidebarContainer);

请检查Redux文档中的部分。为了更深入的理解

注意：关于操作（您从props调用的函数：
this.prop.actionName
-它们也应该通过
mapDispatchToProps
）连接到组件上）
在
渲染
中您要从
此导入的
可见

const { visible } = this.props;

但是它们是如何传递到组件道具的呢

visible
值存储在Redux中，应该连接到React组件，这样您就可以使用它了

如您所见，没有任何连接：

export default connect()(SidebarContainer);

所以你需要这样连接它：

const mapStateToProps = state => {
  return {
    visible: state.REDUCER_NAME.visible // propably sidebar
  }
}

export default connect(mapStateToProps, null)(SidebarContainer);

请检查Redux文档中的部分。为了更深入的理解

注意：操作也是一样（从props调用的函数：
this.prop.actionName
-它们也应该通过
mapDispatchToProps
连接到组件）