用Redux来进行组件间通讯

lemanli 发布于2019-08-20 14:24 / 696人阅读

摘要：用来进行组件间通讯地址疑惑之前在做项目的时候，一直会遇到一个困扰我的问题，两个互相独立的子组件如何通讯假设现在结构如下是一个组件，里面有一个删除操作，点击添加备注时会弹出模态框，让用户进行填写。

用Redux来进行组件间通讯

demo地址

疑惑

之前在做项目的时候，一直会遇到一个困扰我的问题，两个互相独立的子组件如何通讯？

假设现在结构如下

ListItem是一个todoList组件，里面有一个删除操作，点击添加备注时会弹出模态框，让用户进行填写。

按照以前的写法，要像这样

父组件要传递一个props:showDelModal,以便于todoItem调起模态框。

同时，父组件要传递confirm、cancel两个props给Modal组件,用于接收Modal组件点击了确认还是取消。

假设这样的子组件较多，那父组件就显得很臃肿，阅读代码也很麻烦，我希望调用确认模态框时就像调用window.confirm一样，逻辑清晰，不需要这么多的回调函数。

实现

用了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 (
            
                
                    确认删除？
                    
                        
                        
                    
                
            
        )
    }

}

修改原有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, data, {show: false});
        default:
            return data;
    }
}

//... 其他reducer

export default combineReducers({todoList, confirmModalData});

下面这种写法，是不是就很像window.confirm呢？

let ret = await this.waitForConfirm().catch(e => {
            return false;
        });

原理

其实原理还是用了回调函数，只是将其包裹在一个Promise对象中：
把Modal的confirm和cancel放入Redux的store中，每个todoItem进行删除操作时，会替换store中的resolve和reject函数，并返回一个Promise对象，而Modal进行确认和取消操作，会调用store中的resolve和reject函数，这样，todoItem等待模态框的Promise就返回啦，通过返回值就可以判断是确认和取消操作了。

这样的好处就是，即使组件的层级再深，也不会增加数据传递的复杂度，因为两者是直接通过store来通讯的。

私有云海外云主机进程间通讯服务器间通讯速度动态库进程间通讯linux 父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81600.html

React 组件之间的通讯

摘要：父组件声明自己支持父组件提供一个函数，用来返回相应的对象子组件声明自己需要使用我胡汉三又回来了点击我如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信跨级组件之间...

dongxiawu 2019-08-23 16:59 评论0 收藏0
Redux入门0x101: 简介及`redux`简单实现

摘要：在我看来它们的关系不会比共用开头更深了，所以我就重新开了一个头，但其实是基于前面写的资源中文文档英文文档官方视频学习历程当初为了学习，看了许多的材料，中途曾经放弃两次，但是最后还是勇敢的拿起了它，现在终于勉强弄懂。 0x000 概述这一章开始讲redux，其实是承接前面的react，但其实作为一个框架来说，redux和react并没有太多的关系，本身是独立存在的。在我看来它们的关系不...

ssshooter 2019-08-23 11:40 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
前端中台系统常见问题剖析与解决方案

摘要：它每一行代码都凝结着我从深坑中跳出来之后的思考，是下文介绍了所有问题和场景的解决方案。在版本推出了新的，这也是所官方推荐的一种跨传递数据的解决方案。干货高能预警，此文章信息量巨大，大部分内容为对现状问题的思考和现有技术的论证。感兴趣的朋友可以先收藏，然后慢慢研读。此文凝结了我在中台领域所有的思考和探索，相信读完此文，能够让你对中台领域的常见业务场景和解决方法有着全新的认知。此文转载请...

Aklman 2019-05-23 17:28 评论0 收藏0
React组件模型启示录

摘要：另一种关于组件的常见说法，是组件是为了重用。这件事情是前端特有的，受限制于的结构。这一节的题目叫做混乱的组件通讯，我们来仔细掰扯一下细节，因为组件模型虽然很常说但是对通讯过程没有约定。这个话题很难写。但是反过来说，爱因斯坦有句名言：如果你不能把一个问题向一个六岁孩子解释清楚，那么你不真的明白它。所以解释清楚一个问题的关键，不是去扩大化，而是相反，最小化。 Lets begin. ...

eternalshallow 2019-08-20 17:52 评论0 收藏0