成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

redux工作原理簡(jiǎn)單入門(mén)

IamDLY / 3137人閱讀

摘要：首先要明白工作的過(guò)程組件通過(guò)去觸發(fā)里面的，然后返回一個(gè)新的去改變里面的值。一個(gè)應(yīng)用只有一個(gè)，接收作為參數(shù)。創(chuàng)建，把和聯(lián)系起來(lái)組件通過(guò)組件可以訪問(wèn)到里面特定的和避免因?yàn)楸O(jiān)聽(tīng)所有變化造成性能問(wèn)題。

首先要明白工作的過(guò)程：組件通過(guò)dispatch action去觸發(fā)store里面的reducer，然后reducer返回一個(gè)新的state去改變store里面的值。我們dispatch的action里面必須寫(xiě)明白type是啥，這樣reducer里面進(jìn)行switch action.type的時(shí)候才能匹配到需要return的state是什么樣的，因?yàn)榭赡軟](méi)有匹配的type，所以reducer必須寫(xiě)一個(gè)默認(rèn)的return state。
然后開(kāi)始通過(guò)例子說(shuō)明：
從actions開(kāi)始吧。 actions其實(shí)就是一個(gè)對(duì)象，這個(gè)對(duì)象留著給組件dispatch給reducer。我們經(jīng)?？吹降氖欠祷豠ction對(duì)象的函數(shù)。像這樣子

function addOne() {//+1
    return {
        type: "ADD_ONE"
    }
}

function reduceOne() {//-1
    return {
        type: "REDUCE_ONE"
    }
}

function addCustomNumber(number) {//接收一個(gè)參數(shù)，等著給reducer取出來(lái)去改變state的值
    return {
        type: "ADD_CUSTOM_NUM",
        number
    }
}

接下來(lái)是reducer，也就是和我們的state產(chǎn)生聯(lián)系的純函數(shù)。它接收兩個(gè)參數(shù)，第一個(gè)是state，可以賦值一個(gè)state的初始狀態(tài)，第二個(gè)參數(shù)是action，也就是我們的組件通過(guò)dispatch一個(gè)action的時(shí)候，store會(huì)把這個(gè)action作為參數(shù)傳給reducer。

const initialState = {count: 0};
const counter = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_ONE":
            return { count: state.count + 1};
        case "REDUCE_ONE":
            return { count: state.count - 1};
        case "ADD_CUSTOM_NUM":
            debugger
            return { count: state.count + action.number}
        default:
            return state;
    }
}

store: 一個(gè)應(yīng)用只有一個(gè)store，createStore接收reducer作為參數(shù)。如果有多個(gè)reducer可以用combineReducer把多個(gè)reducer結(jié)合在一起傳給createStore。

const store = createStore(counter);//創(chuàng)建store，把reducer和state聯(lián)系起來(lái)

組件：通過(guò)connect(mapStateToProps, mapDispatchToProps)(組件) 可以訪問(wèn)到store里面特定的state和action,避免因?yàn)楸O(jiān)聽(tīng)所有state變化造成性能問(wèn)題。在mapDispatchToProps里面可以用bindActionCreators把dispatch和action creator綁定在一起，這樣就直接調(diào)用action creator函數(shù)就相當(dāng)于直接dispatch了。最后，要把連接后的組件寫(xiě)在provider里面，才能正常訪問(wèn)到store。于是乎，又回到那個(gè)觀點(diǎn)，組件觸發(fā)dispatch action, store里面的reducer會(huì)判斷action的類型，然后返回新的state，state的變化也會(huì)觸發(fā)組件的更新。

export class Counter extends React.Component {
    render() {
        const { count, addOne, reduceOne, addCustomNumber } = this.props;
        return 

                    
                    {count}
                    
                    
                

    }
}

function mapStateToProps(state) {
    return {count: state.count}
}

function mapDispatchToProps(dispatch) {
    //這樣寫(xiě)就不用在組件里面還要去dispatch啦，直接把dispatch和actions createor綁定在一起，
    // 調(diào)用actions creator函數(shù)就是調(diào)用dispatch actions
    return bindActionCreators({addOne, reduceOne, addCustomNumber}, dispatch);
}

const WrappedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);//組件和store, actions連接起來(lái)，從而能在組件里面訪問(wèn)store和actions

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97750.html

相關(guān)文章

  • 前端學(xué)習(xí)資源

    摘要：提供了完整的環(huán)境，并且支持自定義域名指向，動(dòng)態(tài)計(jì)算資源調(diào)整，可以完成各種應(yīng)用的開(kāi)發(fā)編譯與部署。 react 新特性 react16 Context 算法相關(guān) 圖解排序算法(二)之希爾排序 微信小程序 微信小程序組件化的解決方案移動(dòng)端尺寸基本知識(shí) 瀏覽器 前端必讀：瀏覽器內(nèi)部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關(guān)系瀏覽器緩存 CSS學(xué)習(xí) 移動(dòng)web開(kāi)發(fā)布局入...

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

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

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

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

  • 適合初學(xué)者觀看的深入淺出react全家桶（一）

    摘要：本系列文章主要是介紹一些概念原理深入，適合有點(diǎn)基礎(chǔ)的初學(xué)者觀看。是狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。使用單向數(shù)據(jù)流，這意味著只能父組件傳遞給子組件。工作流工作流如下圖關(guān)于數(shù)據(jù)流的原理還有大佬不懂這個(gè)話，大佬可以點(diǎn)擊傳送門(mén) 本系列文章主要是介紹redux一些概念原理深入，適合有點(diǎn)react基礎(chǔ)的初學(xué)者觀看。分別講述了Reudx、React Hooks等內(nèi)容。部分內(nèi)容涉及源碼解析。 wh...

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

  • Vuex — The core of Vue application

    摘要：個(gè)人看來(lái)，一個(gè)狀態(tài)管理的應(yīng)用，無(wú)論是使用，還是，最困難的部分是在的設(shè)計(jì)。中，并沒(méi)有移除，而是改為用于觸發(fā)。也是一個(gè)對(duì)象，用于注冊(cè)，每個(gè)都是一個(gè)用于返回一部分的。接受一個(gè)數(shù)組或?qū)ο?，根?jù)相應(yīng)的值將對(duì)應(yīng)的綁定到組件上。 系列文章: Vue 2.0 升（cai）級(jí)（keng）之旅 Vuex — The core of Vue application (本文) 從單頁(yè)應(yīng)用(SPA)到服務(wù)器...

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

  • 教你如何打好根基快速入手react，vue，node

    摘要：謹(jǐn)記，請(qǐng)勿犯這樣的錯(cuò)誤。由于在之前的教程中，積累了堅(jiān)實(shí)的基礎(chǔ)。其實(shí)，這是有緣由的其復(fù)雜度在早期的學(xué)習(xí)過(guò)程中，將會(huì)帶來(lái)災(zāi)難性的影響。該如何應(yīng)對(duì)對(duì)于來(lái)說(shuō)，雖然有大量的學(xué)習(xí)計(jì)劃需要采取，且有大量的東西需要學(xué)習(xí)。 前言倘若你正在建造一間房子，那么為了能快點(diǎn)完成，你是否會(huì)跳過(guò)建造過(guò)程中的部分步驟？如在具體建設(shè)前先鋪設(shè)好部分石頭？或直接在一塊裸露的土地上先建立起墻面？ 又假如你是在堆砌一個(gè)結(jié)婚蛋糕...

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

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

0條評(píng)論

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