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;

react-redux: modal的更多相关文章

  1. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  2. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  3. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  4. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  5. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  6. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  7. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  8. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  9. react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  10. react+redux教程(二)redux的单一状态树完全替代了react的状态机?

    上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...

随机推荐

  1. Visual Studio 正则表达式替换

    查找空行:^(?([^\r\n])\s)*\r?$\r?\n 查找多余的空行:^(?([^\r\n])\s)*\r?$\r?\n^(?([^\r\n])\s)*\r?$\r?\n

  2. 125. Valid Palindrome(判断忽略标点的字符串是否回文,加个正则,与上一题解法一样)

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  3. Python Tornado框架三(源码结构)

    Tornado 是由 Facebook 开源的一个服务器“套装”,适合于做 python 的 web 或者使用其本身提供的可扩展的功能,完成了不完整的 wsgi 协议,可用于做快速的 web 开发,封 ...

  4. 正则表达式和python的re模块

    0 正则表达式 0.1 常见的元字符 .:    匹配除\r\n之外的任何单个字符 *:    匹配前面的子表达式任意次,例如Zz*可以匹配Z,可以匹配Zz,也可以匹配Zzzzzzzzzz +:    ...

  5. Sublime Text Shortcuts

    Keyboard Shortcuts - Windows/Linux Warning This topic is a draft and may contain wrong information. ...

  6. Zabbix Linux http 监控脚本

    说明:自定义监控脚本,监控内存是否启用主进程 创建文件:vim check_http.sh #!/bin/bash result=`ps -ef | grep httpd | grep -v grep ...

  7. 关于Simplicity Studio使用math.h编译出错

    原因是未调用C标准库. 解决方法: 1.点项目右键——>properties——>C/C++Build——>Settings——>GNU ARM C Linker——>L ...

  8. Go语言学习之数据类型以及类型转换(The way to go)

    生命不止,继续go go go 介绍来go中的变量和常量,今天介绍一下go中的基本类型. 可以分为四大类,现在一点点道来. Boolean Types 布尔类型,不用过多介绍来吧,就是true和fal ...

  9. Qt debug和release

    debug会默认给变量赋初始值,但是release不会. 所以: 在头文件中声明指针P* p时,最好给它初始化:P* p=NULL; 不然有可能造成野指针的情况

  10. 使用Kali Linux 破解无线网

    用到的工具 airmon-ngairodump-ngaireplay-ngaircrack-ng 过程 123456789101112131415161718192021222324 root@lm: ...