React Action, Reducer & Connect Syntax

I have the following React Code to Create a booleen true/false in Redux store which is then used to open/close a Material UI Drawer/Side Menu.

I'm new to React and I wanted to ask if what I'm doing is correct or if I'm making obvious mistakes etc.

Note: the solution works (it opens/closes the Drawer as expected). I just interested to know if I should be coding differently... also I've removed a little code so it can be read more easily...

Actions File:

export const setDrawerPopOutMenuStatus = {
    type: 'DRAWER_POPOUT_MENU_STATUS'
}

Reducers File:

import { combineReducers } from 'redux';

const setDrawerPopOutMenuStatus = (state = true, action) => {
    switch (action.type) {
        case 'DRAWER_POPOUT_MENU_STATUS':
            if(state) {
                return false;
            }else{
                return true;
            }
        default:
            return state;
    }
}

export default combineReducers({
    setDrawerPopOutMenuStatus
})

Store File

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './reducers.js';
import { setDrawerPopOutMenuStatus } from './actions.js';


const store = createStore(reducer, composeWithDevTools());

const render = () => {
    console.dir(store.getState());
};

store.subscribe(render);
render();

export default store;

Index.js (starting File):

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import store from './store.js';
    import './index.css';
    import App from './components/App.js';
    import registerServiceWorker from './registerServiceWorker';

    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>
        , document.getElementById('root'));
    registerServiceWorker();

Finally Component (this passes the state to a sub-component):

import React from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { setDrawerPopOutMenuStatus } from "../actions";


class App extends React.Component {

    // Redux Drawer State (Toggle PopOut Menu)
    drawerPopOutHandle = () => {
        this.props.drawerPopOutUpdated();
    }


    // PreLoad Actions (eg: make action run once to start with)
    componentDidMount() {
        this.props.drawerPopOutUpdated()
    }


    render() {
        return (
                <LeftDrawerMenu drawerStatus={this.props.drawerStatus}/>
        )
    }
}





App.propTypes = {
    drawerStatus: PropTypes.bool
};

const mapStateToProps = (state) => {
    console.log('drawer status: '+state.setDrawerPopOutMenuStatus);

    return {
        drawerStatus: state.setDrawerPopOutMenuStatus
    }
}

const mapDispatchToProps = (Dispatch) => {
    return({
        drawerPopOutUpdated: () => Dispatch(setDrawerPopOutMenuStatus)
    })
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Why don't you make action as a const like below? Also storing states using object not a single value would be much convenient.

action.js

/*Action*/
export const DRAWER_POPOUT_MENU_STATUS = 'DRAWER_POPOUT_MENU_STATUS';

/*Action Creator*/
export const setDrawerPopOutMenuStatus = {
    type: DRAWER_POPOUT_MENU_STATUS,
}

reducers.js

import { combineReducers } from 'redux';
import { DRAWER_POPOUT_MENU_STATUS } from './action';

const initialState = {
    someName: true,
};

const setDrawerPopOutMenuStatus = (state = initialState, action) => {
    switch (action.type) {
        case DRAWER_POPOUT_MENU_STATUS:
            let newState = {};
            newState['someName'] = !state.someName;
            return Object.assign({}, state, newState);
        default:
            return state;
    }
}

This makes it easier to manage later on when the project is bigger.