React-Redux error: 'visible' is undefined - reactjs

Question

I am trying to implement a sidebar function coming from https://react.semantic-ui.com/modules/sidebar/#types-sidebar. But I'm still getting the undefined 'visible' error. I want to pass my mapped state to props 'visible' from my index to the navbar.js on the buttons when disabled.
So I created a reducer 'reducers/App.js':
import {
HIDE_CLICK,
SHOW_CLICK,
HIDE_SIDE_BAR,
} from "../actions/app";
const initialState = {
visible: false
};
const appReducer = (state = initialState, {type}) => {
switch(type) {
case HIDE_CLICK:
return {
...state,
visible: false,
}
case SHOW_CLICK:
return{
...state,
visible: true,
}
case HIDE_SIDE_BAR:
return {
...state,
visible: false,
}
};
}
export default appReducer;
Then its action 'action/App.js':
export const HIDE_CLICK = "HIDE_CLICK";
export const SHOW_CLICK = "SHOW_CLICK";
export const HIDE_SIDE_BAR = "HIDE_SIDE_BAR";
export const handleHideClick = () => ({
type: HIDE_CLICK,
})
export const handleShowClick = () => ({
type: SHOW_CLICK,
})
export const handleSideBarHide = () => ({
type: HIDE_SIDE_BAR,
})
Now my component contains: 'NavBar/index.js'
import { connect } from "react-redux";
import NavBar from "./NavBar";
import { handleHideClick, handleShowClick, handleSideBarHide } from "../../redux/actions/app";
/* istanbul ignore next */
const mapStateToProps = state => ({
isAuthenticated: state.authentication.authenticated,
visible: state.app.visible
});
const mapDispatchToProps = (dispatch) => {
return{
handleHideClick: () => dispatch(handleHideClick),
handleShowClick: () => dispatch(handleShowClick),
handleSideBarHide: () => dispatch(handleSideBarHide)
}
};
export default connect(
mapStateToProps,
mapDispatchToProps,
)(NavBar);
and my 'NavBar/NavBar.js'
import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { Container, Menu, Button, Sidebar,Segment, Icon, Header, Image } from "semantic-ui-react";
export const ShowSideBar = ({
handleShowClick,
handleHideClick,
handleSideBarHide
}) => (
<div>
<Button.Group>
<Button disabled={visible} onClick={handleShowClick}>
Show sidebar
</Button>
<Button disabled={!visible} onClick={handleHideClick}>
Hide sidebar
</Button>
</Button.Group>
<Sidebar.Pushable as={Segment}>
<Sidebar
as={Menu}
animation='overlay'
icon='labeled'
inverted
onHide={handleSideBarHide}
vertical
visible={visible}
width='thin'
>
...
)
and lastly defined the app reducer on my root reducer:
import { combineReducers } from "redux";
import authentication from "./authentication";
import app from "./app";
const rootReducer = combineReducers({
authentication,
app
});
export default rootReducer;

Answer 1

You need to list all the props you need or just don't destructure them:
export const ShowSideBar = ({
handleShowClick,
handleHideClick,
handleSideBarHide,
visible
}) => (
....
)
or export const ShowSideBar = (props) => (...) and access everything with props.