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

資訊專欄INFORMATION COLUMN

Redux入門0x102: redux 栗子之 counter

Dean / 2337人閱讀

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

0x000 概述

這一章講一些栗子

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

修改模板




    React Study




    
0

修改入口文件

import {createStore} from "redux"

// 聲明兩個 action
const ACTION_NUM_INCREMENT = "ACTION_NUM_INCREMENT"
const ACTION_NUM_DECREMENT = "ACTION_NUM_DECREMENT"

// 聲明一個 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)聽, 當(dāng) reducer 發(fā)生改變的時候獲取新的 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})
})

查看瀏覽器

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

0x002 使用ledux

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

導(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實現(xiàn)

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

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

// 聲明兩個 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é)

無

0x005 資源

源碼

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

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

相關(guān)文章

  • Router入門0x201: 從 URL 到 SPA

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

    honmaple 評論0 收藏0

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

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

    BetaRabbit 評論0 收藏0

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

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

    20171112 評論0 收藏0

  • Redux入門0x104: Action Creators

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

    sydMobile 評論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

發(fā)表評論

0條評論

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