react-redux: modal

1.actionTpye

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const OPENMODAL = 'OPENMODAL';
export const CLOSEMODAL = 'CLOSEMODAL';
export const CONFIRM = 'CONFIRM';

2.create action:

import {createAction} from "redux-actions";

import {OPENMODAL, CLOSEMODAL, CONFIRM} from "constant/ActionType";

export  const openModal = createAction(OPENMODAL);
export  const closeModal = createAction(CLOSEMODAL);
export  const handleConfirm = createAction(CONFIRM);

3.modal reducer:

import {OPENMODAL, CLOSEMODAL, CONFIRM} from "constant/ActionType";

const initialState = {
    visible: false,
    message: "Admin"
};

const MessageModalReducer = (state = initialState, action) => {
    const visible = state.visible;
    let message = state.message;
    switch (action.type) {
        case OPENMODAL:
        case CLOSEMODAL:
            return {
                message,
                visible: !visible
            };
        case CONFIRM:
            message = "confirm message";
            return {
                message: message,
                visible: !visible
            };
        default:
            return state;
    }
};

export default MessageModalReducer;

4.use

import React from "react";
import {connect} from "react-redux";
import {Row, Col, Button} from "antd";

import * as actions from "../../reduxModel/actions/CounterAction";
import {closeModal, openModal, handleConfirm} from "reduxModel/actions/ModalAction";
import MessageModal from "modals/message-modal/MessageModal";
import "./index.scss";

const mapStateToProps = state => {
    return {
        message: state.MessageModalReducer.message,
        messageModalVisible: state.MessageModalReducer.visible
    }
};
const mapDispatchToProps = {
    openMessageModal: openModal,
    closeMessageModal: closeModal,
    handleConfirm: handleConfirm
};

class Home extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const {message, openMessageModal, closeMessageModal, messageModalVisible, handleConfirm} = this.props;
        return (
            <div className="app-home">
                <div className="app-layout-container">
                    <Row type="flex" justify="center" className="app-layout-body">
                        <Col span={24} className="page-panel">
                            welcome Home,{message}
                            <div>
                                <Button type="primary" htmlType="button"
                                        onClick={openMessageModal}>plan</Button>
                            </div>
                        </Col>
                    </Row>
                </div>
                <MessageModal title="task detail info"
                              modalVisible={messageModalVisible}
                              handleOk={handleConfirm}
                              handleCancel={closeMessageModal}>
                    <DetailMapping type="plan"/>
                </MessageModal>
            </div>
        )
    }
}

const HomeContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Home);

export default HomeContainer;

detailMapping:

import React from "react";

import PlanDetail from "page/demo/detail/PlanDetail";
import ManagerDetail from "page/demo/detail/ManagerDetail";

class DetailMapping extends React.Component{

    render () {
        const detailMapping = {
            "plan": <PlanDetail />,
            "manager": <ManagerDetail />
        };
        return (
            <div>{detailMapping[this.props.type]}</div>
        )
    }
}

export default DetailMapping;

6. modal:

import React from "react";
import {Modal} from "antd";

const MessageModal = props => {

    const {title, handleOk, handleCancel, modalVisible} = props;

    return (
        <Modal title={title}
               okText="confirm"
               cancelText="cancel"
               onOk={handleOk}
               onCancel={handleCancel}
               visible={modalVisible}>
            {props.children}
        </Modal>
    )
};

export default MessageModal;