用Redux来进行组件间通讯
用Redux来进行组件间通讯demo地址 疑惑之前在做项目的时候,一直会遇到一个困扰我的问题,两个互相独立的子组件如何通讯? 假设现在结构如下
按照以前的写法,要像这样
假设这样的子组件较多,那父组件就显得很臃肿,阅读代码也很麻烦,我希望调用确认模态框时就像调用 实现用了redux后,发现我的思路是可以被实现的,下面讲一下过程,建议和代码一起看。 我们新建一个modal组件 import React from 'react'; import ReactDOM from 'react-dom'; import '../stylus/modal.styl'; export default class ConfirmModal extends React.Component { constructor() { super(); } componentDidMount() { } onConfirm() { this.props.resolve(true); } onCancel() { this.props.reject(false); } render() { return ( <div className="modal" style={{display: this.props.show ? 'block' : 'none'}}> <div className="modal-inner"> <h3>确认删除?</h3> <div className="btn-action"> <button className="pure-button" onClick={this.onConfirm.bind(this)}>确认</button> <button className="pure-button" onClick={this.onCancel.bind(this)}>取消</button> </div> </div> </div> ) } } 修改原有todoItem的del函数 //重点在这 waitForConfirm() { let {store} = this.context; return new Promise((resolve,reject) => { store.dispatch({ type: 'SHOW_MODAL',payload: { show: true,resolve,reject } }) }); } closeModal() { let {store} = this.context; store.dispatch({ type: 'CLOSE_MODAL',payload: {} }) } async del() { let {index} = this.props; let ret = await this.waitForConfirm().catch(e => { return false; }); if (!ret) { this.closeModal(); return false; } this.props.handleDelTodo(index); this.closeModal(); } 原有的reducer上增加数据 /** * Created by chenchen on 2017/2/4. */ import {combineReducers} from 'redux'; function todoList(todolist = [],action) { switch (action.type) { case 'ADD_TODO': return [...todolist,...action.payload]; return todolist; case 'DEL_TODO': return todolist.filter((val,index) => index !== action.payload); default: return todolist; } } //确认删除模态框 function confirmModalData(data = { show: false,resolve: null,reject: null },action) { let d = {}; switch (action.type) { case 'SHOW_MODAL': return Object.assign(d,data,action.payload); case 'CLOSE_MODAL': return Object.assign(d,{show: false}); default: return data; } } //... 其他reducer export default combineReducers({todoList,confirmModalData}); 下面这种写法,是不是就很像 let ret = await this.waitForConfirm().catch(e => { return false; }); 原理其实原理还是用了回调函数,只是将其包裹在一个Promise对象中: 这样的好处就是,即使组件的层级再深,也不会增加数据传递的复杂度,因为两者是直接通过store来通讯的。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- C++ hash(STL hash)及其函数模板用法详解
- atitit.解决net.sf.json.JSONException There is a cycle i
- Postgresql收件箱查询
- c – 优化O_DIRECT写入
- Swift-Closures 闭包
- 【12.2新特性】Oracle Sharding分片级别的高可用实现
- ajax – 在Firefox开发人员工具控制台选项卡中显示完整的UR
- ruby-on-rails – 用于rails控制台/服务器等的Shell功能/别
- Swift 读取系统图片以及改变图片 圆形 UIImagePickerContro
- 使用ReactiveCocoa初探MVVM