用Redux來進行組件間通訊

lemanli 發布于2019-08-20 14:24 / 790人閱讀

摘要：用來進行組件間通訊地址疑惑之前在做項目的時候，一直會遇到一個困擾我的問題，兩個互相獨立的子組件如何通訊假設現在結構如下是一個組件，里面有一個刪除操作，點擊添加備注時會彈出模態框，讓用戶進行填寫。

用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來通訊的。

GPU云服務器云服務器進程間通訊服務器間通訊速度動態庫進程間通訊linux 父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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