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

資訊專欄INFORMATION COLUMN

Redux入門0x102: redux 栗子之 counter

Dean / 2283人閱讀

摘要：使用使用實(shí)現(xiàn)也很簡(jiǎn)單上訴的代碼只需要該兩個(gè)地方就行了導(dǎo)入修改為這樣就行了使用實(shí)現(xiàn)使用實(shí)現(xiàn)無(wú)法復(fù)用現(xiàn)有的，但是也很簡(jiǎn)單聲明兩個(gè)綁定事件總結(jié)無(wú)資源源碼

0x000 概述

這一章講一些栗子

0x001 原生+redux實(shí)現(xiàn)counter

修改模板




    React Study




    
0

修改入口文件

import {createStore} from "redux"

// 聲明兩個(gè) action
const ACTION_NUM_INCREMENT = "ACTION_NUM_INCREMENT"
const ACTION_NUM_DECREMENT = "ACTION_NUM_DECREMENT"

// 聲明一個(gè) reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_NUM_INCREMENT: {
            return ++state
        }
        case ACTION_NUM_DECREMENT: {
            return --state
        }
        default : {
            return state
        }
    }
}

let store = createStore(counter)

// 設(shè)置監(jiān)聽(tīng), 當(dāng) reducer 發(fā)生改變的時(shí)候獲取新的 counter, 并更新界面
store.subscribe(() => {
    document.getElementById("counter").innerText = store.getState()
})

// 綁定事件
document.getElementById("btnAdd").addEventListener("click", () => {
    store.dispatch({type: ACTION_NUM_INCREMENT})
})
document.getElementById("btnSub").addEventListener("click", () => {
    store.dispatch({type: ACTION_NUM_DECREMENT})
})

查看瀏覽器

說(shuō)明：dispatch其實(shí)就是發(fā)出一個(gè)請(qǐng)求，比如store.dispatch({type: ACTION_NUM_INCREMENT})發(fā)出的其實(shí)是一個(gè)增加的請(qǐng)求，當(dāng)然這個(gè)只是一個(gè)名字而已，如何處理還看我們自己，是一個(gè)簡(jiǎn)單的js對(duì)象，我們發(fā)出這個(gè)請(qǐng)求以后，reducer將會(huì)受到這個(gè)請(qǐng)求，counter中的action對(duì)象其實(shí)就是你發(fā)出的這個(gè)東西，經(jīng)過(guò)switch處理以后，將會(huì)吧reducer返回值作為新的state保存起來(lái)，并通知訂閱了store的地方--subscribe的回調(diào)函數(shù)將會(huì)執(zhí)行。

0x002 使用ledux

使用ledux實(shí)現(xiàn)也很簡(jiǎn)單上訴的代碼只需要該兩個(gè)地方就行了

導(dǎo)入Ledux

import Ledux from "../../0x101-hello-redux/src/ledux";

修改createStore為Ledux.createStore

//redux
// let store = createStore(counter)
//ledux
let store = Ledux.createStore(counter)

這樣就行了

0x003 使用MyEvent實(shí)現(xiàn)

使用MyEvent實(shí)現(xiàn)無(wú)法復(fù)用現(xiàn)有的，但是也很簡(jiǎn)單

import MyEvent from "../../0x012-component-communication/src/MyEvent";

// 聲明兩個(gè) action
const ACTION_NUM_INCREMENT = "ACTION_NUM_INCREMENT"
const ACTION_NUM_DECREMENT = "ACTION_NUM_DECREMENT"

let counter = 0
MyEvent.sub(ACTION_NUM_INCREMENT, () => {
    document.getElementById("counter").innerText = counter
})
MyEvent.sub(ACTION_NUM_DECREMENT, () => {
    document.getElementById("counter").innerText = counter
})
// 綁定事件
document.getElementById("btnAdd").addEventListener("click", () => {
    ++counter
    MyEvent.pub(ACTION_NUM_INCREMENT)
})
document.getElementById("btnSub").addEventListener("click", () => {
    --counter
    MyEvent.pub(ACTION_NUM_DECREMENT)
})
0x004 總結(jié)

無(wú)

0x005 資源

源碼

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

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

相關(guān)文章

  • Router入門0x201: 從 URL 到 SPA

    摘要：的全稱是統(tǒng)一資源定位符英文，可以這么說(shuō)，是一種標(biāo)準(zhǔn)，而網(wǎng)址則是符合標(biāo)準(zhǔn)的一種實(shí)現(xiàn)而已。渲染器，將組件渲染到頁(yè)面上。 0x000 概述 從這一章開始就進(jìn)入路由章節(jié)了，并不直接從如何使用react-route來(lái)講，而是從路由的概念和實(shí)現(xiàn)來(lái)講，達(dá)到知道路由的本質(zhì)，而不是只知道如何使用react-route庫(kù)的目的，畢竟react-route只是一個(gè)庫(kù)，是路由的一個(gè)實(shí)現(xiàn)而已，而不是路由本身。 ...

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

  • Redux入門0x106: `react`、`vue`、`原生 js`集成`redux`

    摘要：概述之前寫的所有關(guān)于的文章都是純粹的，是和框架無(wú)關(guān)環(huán)境無(wú)關(guān)的，所以我沒(méi)有將和一起講，為的是吧和分開，作為獨(dú)立的個(gè)體來(lái)分析，提現(xiàn)的是一種思想，而不是一個(gè)思維定式。而現(xiàn)在我們可以嘗試在中來(lái)使用了。 0x000 概述 之前寫的所有關(guān)于redux的文章都是純粹的redux，是和框架無(wú)關(guān)、環(huán)境無(wú)關(guān)的redux，所以我沒(méi)有將redux和react一起講，為的是吧redux和react分開，作為獨(dú)立...

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

  • Redux入門0x107: `react`集成`redux`精講

    摘要：這里的其實(shí)不需要自己寫，已經(jīng)有好的實(shí)現(xiàn)了引入修改組件完整源碼組件資源源碼 0x000 概述 前面雖然簡(jiǎn)單的講了如何在react中集成redux，但是那只是簡(jiǎn)單的講講而已，這一章將會(huì)仔細(xì)講講如何在react中使用reudx 0x001 問(wèn)題分析 查看前邊的栗子： import {createStore} from redux import React from react import ...

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

  • Redux入門0x104: Action Creators

    摘要：就為我?guī)?lái)了一種應(yīng)用狀態(tài)管理的新思想，其間充斥著許多個(gè)概念，等，乍一看頭大，等到仔細(xì)理解了它的思想，或許就很簡(jiǎn)單了，也是其中一種。 0x000 概述 寫長(zhǎng)文章有點(diǎn)累啊，偶爾寫點(diǎn)短的文章吧 0x001 概念 其實(shí)很多框架在技術(shù)上沒(méi)有太大的難度，真正難的是思想，思想的突破遠(yuǎn)遠(yuǎn)比技術(shù)突破難多了。redux就為我?guī)?lái)了一種應(yīng)用狀態(tài)管理的新思想，其間充斥著許多個(gè)概念，state、reduce等，...

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

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

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

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

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

0條評(píng)論

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