Redux入門0x102: redux 栗子之 counter

Dean 發布于2019-08-23 11:42 / 2279人閱讀

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

0x000 概述

這一章講一些栗子

0x001 原生+redux實現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)

// 設置監聽, 當 reducer 發生改變的時候獲取新的 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其實就是發出一個請求，比如store.dispatch({type: ACTION_NUM_INCREMENT})發出的其實是一個增加的請求，當然這個只是一個名字而已，如何處理還看我們自己，是一個簡單的js對象，我們發出這個請求以后，reducer將會受到這個請求，counter中的action對象其實就是你發出的這個東西，經過switch處理以后，將會吧reducer返回值作為新的state保存起來，并通知訂閱了store的地方--subscribe的回調函數將會執行。

0x002 使用ledux

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

導入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實現

使用MyEvent實現無法復用現有的，但是也很簡單

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 總結

無

0x005 資源

源碼

云服務器 GPU云服務器 Redux redux源碼 redux-saga react-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97340.html

Router入門0x201: 從 URL 到 SPA

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

honmaple 2019-08-26 12:20 評論0 收藏0
Redux入門0x106: `react`、`vue`、`原生 js`集成`redux`

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

BetaRabbit 2019-08-23 12:04 評論0 收藏0
Redux入門0x107: `react`集成`redux`精講

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

20171112 2019-08-26 12:20 評論0 收藏0
Redux入門0x104: Action Creators

摘要：就為我帶來了一種應用狀態管理的新思想，其間充斥著許多個概念，等，乍一看頭大，等到仔細理解了它的思想，或許就很簡單了，也是其中一種。 0x000 概述寫長文章有點累啊，偶爾寫點短的文章吧 0x001 概念其實很多框架在技術上沒有太大的難度，真正難的是思想，思想的突破遠遠比技術突破難多了。redux就為我帶來了一種應用狀態管理的新思想，其間充斥著許多個概念，state、reduce等，...

sydMobile 2019-08-23 12:02 評論0 收藏0
Redux入門0x101: 簡介及`redux`簡單實現

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

ssshooter 2019-08-23 11:40 評論0 收藏0