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;