亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

用Redux來進行組件間通訊

lemanli / 835人閱讀

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

用Redux來進行組件間通訊

demo地址

疑惑

之前在做項目的時候，一直會遇到一個困擾我的問題，兩個互相獨立的子組件如何通訊？

假設(shè)現(xiàn)在結(jié)構(gòu)如下

ListItem是一個todoList組件，里面有一個刪除操作，點擊添加備注時會彈出模態(tài)框，讓用戶進行填寫。

按照以前的寫法，要像這樣

父組件要傳遞一個props:showDelModal,以便于todoItem調(diào)起模態(tài)框。

同時，父組件要傳遞confirm、cancel兩個props給Modal組件,用于接收Modal組件點擊了確認還是取消。

假設(shè)這樣的子組件較多，那父組件就顯得很臃腫，閱讀代碼也很麻煩，我希望調(diào)用確認模態(tài)框時就像調(diào)用window.confirm一樣，邏輯清晰，不需要這么多的回調(diào)函數(shù)。

實現(xiàn)

用了redux后，發(fā)現(xiàn)我的思路是可以被實現(xiàn)的，下面講一下過程，建議和代碼一起看。

我們新建一個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函數(shù)

    //重點在這
    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上增加數(shù)據(jù)

/**
 * 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;
    }

}

//確認刪除模態(tài)框
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;
        });
原理

其實原理還是用了回調(diào)函數(shù)，只是將其包裹在一個Promise對象中：
把Modal的confirm和cancel放入Redux的store中，每個todoItem進行刪除操作時，會替換store中的resolve和reject函數(shù)，并返回一個Promise對象，而Modal進行確認和取消操作，會調(diào)用store中的resolve和reject函數(shù)，這樣，todoItem等待模態(tài)框的Promise就返回啦，通過返回值就可以判斷是確認和取消操作了。

這樣的好處就是，即使組件的層級再深，也不會增加數(shù)據(jù)傳遞的復(fù)雜度，因為兩者是直接通過store來通訊的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81600.html

相關(guān)文章

  • React 組件之間的通訊

    摘要：父組件聲明自己支持父組件提供一個函數(shù)，用來返回相應(yīng)的對象子組件聲明自己需要使用我胡漢三又回來了點擊我如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個回調(diào)函數(shù)，供子組件調(diào)用，回傳參數(shù)。 在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況： 父組件向子組件通信 子組件向父組件通信 跨級組件之間...

    dongxiawu 評論0 收藏0

  • Redux入門0x101: 簡介及`redux`簡單實現(xiàn)

    摘要：在我看來它們的關(guān)系不會比共用開頭更深了，所以我就重新開了一個頭，但其實是基于前面寫的資源中文文檔英文文檔官方視頻學(xué)習(xí)歷程當(dāng)初為了學(xué)習(xí)，看了許多的材料，中途曾經(jīng)放棄兩次，但是最后還是勇敢的拿起了它，現(xiàn)在終于勉強弄懂。 0x000 概述 這一章開始講redux，其實是承接前面的react，但其實作為一個框架來說，redux和react并沒有太多的關(guān)系，本身是獨立存在的。在我看來它們的關(guān)系不...

    ssshooter 評論0 收藏0

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計使用的站點是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...

    AlphaWallet 評論0 收藏0

  • 前端中臺系統(tǒng)常見問題剖析與解決方案

    摘要：它每一行代碼都凝結(jié)著我從深坑中跳出來之后的思考，是下文介紹了所有問題和場景的解決方案。在版本推出了新的，這也是所官方推薦的一種跨傳遞數(shù)據(jù)的解決方案。 干貨高能預(yù)警，此文章信息量巨大，大部分內(nèi)容為對現(xiàn)狀問題的思考和現(xiàn)有技術(shù)的論證。 感興趣的朋友可以先收藏，然后慢慢研讀。此文凝結(jié)了我在中臺領(lǐng)域所有的思考和探索，相信讀完此文，能夠讓你對中臺領(lǐng)域的常見業(yè)務(wù)場景和解決方法有著全新的認知。 此文轉(zhuǎn)載請...

    Aklman 評論0 收藏0

  • React組件模型啟示錄

    摘要：另一種關(guān)于組件的常見說法，是組件是為了重用。這件事情是前端特有的，受限制于的結(jié)構(gòu)。這一節(jié)的題目叫做混亂的組件通訊，我們來仔細掰扯一下細節(jié)，因為組件模型雖然很常說但是對通訊過程沒有約定。 這個話題很難寫。 但是反過來說，愛因斯坦有句名言：如果你不能把一個問題向一個六歲孩子解釋清楚，那么你不真的明白它。 所以解釋清楚一個問題的關(guān)鍵，不是去擴大化，而是相反，最小化。 Lets begin. ...

    eternalshallow 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<