Question

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

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

// 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 extends Component {
handleOpen = () => {
    this.props.dispatch({ type: 'SHOW'});
}
handleClose = () => {
    this.props.dispatch({ type: 'HIDE'});
}

handleToggle = () => {
    const { visible } = this.props;
    const { handleClose, handleOpen } = this;
    if(visible) return handleClose();
    handleOpen();

    console.log(visible); // ouput : undefined.
}

render(){
    const { visible } = this.props;
    const { handleToggle, handleClose } = this;

    return[
        visible && <Dimmer onClick={handleClose} key="dimmer"/>,
        <Sidebar visible={visible} onClose={handleClose} key={0}/>,
        <Hamburger active={visible} onToggle={handleToggle} key={1}/>
    ]
  }
}

export default connect()(SidebarContainer);

调用handleToggle事件时，我得到了两个日志，分别是sidebarReducer.js的console.log（“ show”）的“ show”和SidebarContainer.js的console.log（visible）的“ undefined”。

当可见为真时，将显示调光器，侧边栏，汉堡包组件。但由于我不知道可见对象未定义的原因，因此未显示。你能告诉我原因吗？

Answer 1

在render内部，您正在从visible导入this.props：

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 Doc中的Implementing Components部分。以获得更深入的了解。

注意：：关于动作（您从props调用的功能：this.prop.actionName-它们也应通过mapDispatchToProps连接到组件）上也是如此 >

Answer 2

您必须将组件连接到状态/动作。

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

类似的东西。

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

React尝试使用redux制作侧边栏

2 个答案: