Why can't I manage the state in my modal to open and close using redux?

Question

I want the modal to appear when the user clicks Checkout which's inside <CheckoutButton/> component below.

Instead what's happening is that the modal appears upon reloading my browser, which's the opposite of what I want to happen. What am I doing wrong in my List.js file and/or reducer.js

Here's my List.js file:

import React, { Component } from 'react';
import Aux from '../../../../hoc/Aux';
import { connect } from 'react-redux';
import Modal from 'react-modal';

import FoodButton from '../FoodButtons/FoodButton';

class List extends Component {
    componentWillMount() {
        Modal.setAppElement('body');
    }

    toggleModal = () => {
        this.setState({isActive:!this.state.isActive});
    }

    closeModal = () => {
        this.setState({isActive: false});
    }

    render() {
        return (
            <Aux>
                <CheckoutButton clicked={this.toggleModal}/>

                <Modal isOpen={() => this.props.openModalRedux()}>
                    <button onClick={this.closeModal}>Close</button>
                </Modal>
            </Aux>
        );
    }
}

const mapStateToProps = state => {
    return {
        mClose: state.mClose.closed
    }
};

const mapDispatchToProps = dispatch => {
    return {
        openModalRedux: () => dispatch({type: OPEN_MODAL})
    }
};

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

Here's my reducer.js file:

import React from 'react';
import * as actionTypes from '../action/NoNameAction';

const initialState = {
    isActive: false
};

const modalOpen = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.OPEN_MODAL:
            return {
                ...state
            }

        default:
            return state;
    }
};

export default modalOpen;

Here's the CheckoutButton.js :

import React from 'react';
import Aux from '../../../../hoc/Aux';

const checkoutButton = (props) => (
    <Aux>
        <button onClick={props.clicked}>Checkout</button>
    </Aux>
);

export default checkoutButton;

Answer 1

That's how I see the problem. Just provide accurate binding of react-modal isOpen attribute with appropriate value from redux.

List render method

<Modal isOpen={this.props.isOpen}>
    ...
</Modal>

List mapStateToProps

const mapStateToProps = state => {
    return {
        isOpen: state.global.isModalOpen
    }
};

Reducer (global)

const initialState = {
    isModalOpen: false
};

const global = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.OPEN_MODAL:
            return {
                ...state,
                isModalOpen: true,
            }
        case actionTypes.CLOSE_MODAL:
            return {
                ...state,
                isModalOpen: false,
            }
        default:
            return state;
    }
};