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;
react-redux: modal的更多相关文章
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性
reduce().filter().map().some().every()....展开属性 这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
随机推荐
- Visual Studio 正则表达式替换
查找空行:^(?([^\r\n])\s)*\r?$\r?\n 查找多余的空行:^(?([^\r\n])\s)*\r?$\r?\n^(?([^\r\n])\s)*\r?$\r?\n
- 125. Valid Palindrome(判断忽略标点的字符串是否回文,加个正则,与上一题解法一样)
Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
- Python Tornado框架三(源码结构)
Tornado 是由 Facebook 开源的一个服务器“套装”,适合于做 python 的 web 或者使用其本身提供的可扩展的功能,完成了不完整的 wsgi 协议,可用于做快速的 web 开发,封 ...
- 正则表达式和python的re模块
0 正则表达式 0.1 常见的元字符 .: 匹配除\r\n之外的任何单个字符 *: 匹配前面的子表达式任意次,例如Zz*可以匹配Z,可以匹配Zz,也可以匹配Zzzzzzzzzz +: ...
- Sublime Text Shortcuts
Keyboard Shortcuts - Windows/Linux Warning This topic is a draft and may contain wrong information. ...
- Zabbix Linux http 监控脚本
说明:自定义监控脚本,监控内存是否启用主进程 创建文件:vim check_http.sh #!/bin/bash result=`ps -ef | grep httpd | grep -v grep ...
- 关于Simplicity Studio使用math.h编译出错
原因是未调用C标准库. 解决方法: 1.点项目右键——>properties——>C/C++Build——>Settings——>GNU ARM C Linker——>L ...
- Go语言学习之数据类型以及类型转换(The way to go)
生命不止,继续go go go 介绍来go中的变量和常量,今天介绍一下go中的基本类型. 可以分为四大类,现在一点点道来. Boolean Types 布尔类型,不用过多介绍来吧,就是true和fal ...
- Qt debug和release
debug会默认给变量赋初始值,但是release不会. 所以: 在头文件中声明指针P* p时,最好给它初始化:P* p=NULL; 不然有可能造成野指针的情况
- 使用Kali Linux 破解无线网
用到的工具 airmon-ngairodump-ngaireplay-ngaircrack-ng 过程 123456789101112131415161718192021222324 root@lm: ...