成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用Redux來進(jìn)行組件間通訊

lemanli / 796人閱讀

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

用Redux來進(jìn)行組件間通訊

demo地址

疑惑

之前在做項(xiàng)目的時(shí)候，一直會(huì)遇到一個(gè)困擾我的問題，兩個(gè)互相獨(dú)立的子組件如何通訊？

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

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

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

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

同時(shí)，父組件要傳遞confirm、cancel兩個(gè)props給Modal組件,用于接收Modal組件點(diǎn)擊了確認(rèn)還是取消。

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

實(shí)現(xiàn)

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

我們新建一個(gè)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 (
            

                

                    
確認(rèn)刪除？

                    

                        
                        
                    

                

            

        )
    }

}

修改原有todoItem的del函數(shù)

    //重點(diǎn)在這
    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;
    }

}

//確認(rèn)刪除模態(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;
        });
原理

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

這樣的好處就是，即使組件的層級(jí)再深，也不會(huì)增加數(shù)據(jù)傳遞的復(fù)雜度，因?yàn)閮烧呤侵苯油ㄟ^store來通訊的。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81600.html

相關(guān)文章

  • React 組件之間的通訊

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

    dongxiawu 評(píng)論0 收藏0

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

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

    ssshooter 評(píng)論0 收藏0

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

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

    AlphaWallet 評(píng)論0 收藏0

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

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

    Aklman 評(píng)論0 收藏0

  • React組件模型啟示錄

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

    eternalshallow 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<