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

資訊專欄INFORMATION COLUMN

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

BetaRabbit / 2588人閱讀

摘要：概述之前寫的所有關(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分開，作為獨立的個體來分析，redux提現(xiàn)的是一種思想，而不是一個思維定式。而現(xiàn)在我們可以嘗試在react中來使用了。

0x001 react集成redux栗子-counter

源碼

import {createStore} from "redux"
import React from "react"
import ReactDom from "react-dom"

//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

// 組件
class App extends React.Component {
    constructor() {
        super()
        // 初始化 state
        this.state = {
            counter: 0
        }
        // 監(jiān)聽 store 變化, store 變化的時候更新 counter
        store.subscribe(() => {
            this.setState({
                counter: store.getState()
            })
        })
    }
    // 組件銷毀的時候取消訂閱
    componentWillUnmount(){
        this.unSub()
    }
    render() {
        return 

            
{this.state.counter}

            
            
        

    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

效果

0x002 原生集成 redux

src/index.html




    React Study




    
0

src/index.js

import {createStore} from "redux"
//reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_INCREMENT:
            return state + 1
        case ACTION_DECREMENT:
            return state - 1
        default:
            return state
    }
}
// action
const ACTION_INCREMENT = "INCREMENT"
const ACTION_DECREMENT = "DECREMENT"
// action creator
const increment = () => ({
    type: ACTION_INCREMENT
})
const decrement = () => ({
    type: ACTION_DECREMENT
})

// store
const store = createStore(counter)

// 初始化一些 dom 變量
let counterP = document.getElementById("counter")
let incrementBtn = document.getElementById("incrementBtn")
let decrementBtn = document.getElementById("decrementBtn")

// 監(jiān)聽變化, 在 store 變化的時候修改計數(shù)器顯示
store.subscribe(() => {
    counterP.innerText = store.getState()
})
// 添加點擊事件, 當(dāng)+被點擊的時候修改 state
incrementBtn.onclick = () => {
    store.dispatch(increment())
}
// 添加點擊事件, 當(dāng)-被點擊的時候修改 state
decrementBtn.onclick = () => {
    store.dispatch(decrement())
}

效果和上圖一致

0x003 vue集成redux

源碼：

效果和上圖一致

0x004 總結(jié)

redux是獨立的，就和react、vue一樣都是獨立的框架，如何組合他們是我們的選擇，而不是必然和唯一的，要讓框架成為我們的生產(chǎn)力工具，而不是束縛我們的存在。

0x005 資源

源碼

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

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

相關(guān)文章

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

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

    ssshooter 評論0 收藏0

  • 前端每周清單半年盤點之 React 與 ReactNative 篇

    摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開發(fā)者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為...

    Barry_Ng 評論0 收藏0

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

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

    zhisheng 評論0 收藏0

  • 從 1 到完美，用 js 和 react-native 寫一個 APP

    摘要：從到完美，用和寫一個在年開源了后，緊接著在年就又開源了，就此打開了用和前端技術(shù)寫原生之路。對應(yīng)來看，程序只有兩個部分，和，而部分則分為組件和。所以，在端的純庫無在中同樣適用，如等。應(yīng)用實例便是使用開發(fā)的一個日記。 從 1 到完美，用 js 和 react-native 寫一個 APP facebook 在 2013 年開源了 react 后，緊接著在 2015 年就又開源了 react...

    CollinPeng 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

發(fā)表評論

0條評論

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