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

BetaRabbit 發布于2019-08-23 12:04 / 2541人閱讀

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

0x000 概述

之前寫的所有關于redux的文章都是純粹的redux，是和框架無關、環境無關的redux，所以我沒有將redux和react一起講，為的是吧redux和react分開，作為獨立的個體來分析，redux提現的是一種思想，而不是一個思維定式。而現在我們可以嘗試在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
        }
        // 監聽 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")

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

效果和上圖一致

0x003 vue集成redux

源碼：

效果和上圖一致

0x004 總結

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

0x005 資源

源碼

GPU云服務器云服務器 react-redux React_Redux_Appointm react-router-redux Redux

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

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

Redux入門0x101: 簡介及`redux`簡單實現

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

ssshooter 2019-08-23 11:40 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

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

Barry_Ng 2019-08-22 10:54 評論0 收藏0
前端學習資源

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

zhisheng 2019-08-20 13:33 評論0 收藏0
從 1 到完美，用 js 和 react-native 寫一個 APP

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

CollinPeng 2019-08-23 11:45 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0