如何通過使用redux單擊按鈕來打開我的模態？

Question

我想通過單擊<CheckoutButton/>使用redux打開我的模態，但是在重新加載瀏覽器后它仍然會出現。 我看不到自己在代碼中做錯了什么。 我做錯了什么，該如何解決？ 如果需要其他代碼，我會根據要求進行證明。

這是TacoTypes.js代碼：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import FoodButton from '../../components/FoodButton/FoodButton';
import Aux from '../../hoc/Aux';
import CheckoutButton from '../../containers/CheckoutButton/CheckoutButton';
import Modal from '../../components/Modal/Modal';
import * as actionType from '../../store/actions';

class TacoTypes extends Component {
    render() {
        return(
            <Aux>    
                <CheckoutButton clicked={() => this.props.openModalRedux()}/>

                <Modal isOpen={this.props.isOpen}/>
            </Aux>
        );
    }
}

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

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

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

這是global.js （reducer）文件：

import * as actionType from '../store/actions';

const initialState = {
    isModalOpen: false
};

const global = (state = initialState, action) => {
    switch (action.type) {
        case actionType.OPEN_MODAL:
            return {
                ...state,
                isModalOpen: true
            }

        case actionType.CLOSE_MODAL:
            return {
                ...state,
                isModalOpen: false
            }
    }
    return state
};

export default global;

這是Modal.js代碼：

import React from 'react';
import classes from './Modal.css';

const modal = (props) => {
    return(
        <div onClick={props.isOpen} className={classes.Modal}>
            <h1>modal</h1>
            <button>dismiss</button>
        </div>
    );
};

export default modal;

Answer 1

問題是您沒有告訴Modal組件顯示或隱藏，您應該這樣做以使其起作用，就像這樣

import React, { Component } from 'react';

import classes from './Modal.css';
import Aux from '../../../hoc/Auxiliary/Auxiliary';
import Backdrop from '../Backdrop/Backdrop';

class Modal extends Component {

    shouldComponentUpdate ( nextProps, nextState ) {
        return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
    }

    render () {
        return (
            <Aux>
                <Backdrop show={this.props.show} clicked={this.props.modalClosed} />
                <div
                    className={classes.Modal}
                    style={{
                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                        opacity: this.props.show ? '1' : '0'
                    }}>
                    {this.props.children}
                </div>
            </Aux>
        )
    }
}

export default Modal;