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

資訊專欄INFORMATION COLUMN

Redux入門0x103: 拆分多個 reducer

genefy / 1550人閱讀

摘要：概述這一章講多個怎么處理，并將搞成支持支持多個拆封查看瀏覽器就是這么簡單了，核心函數(shù)是，將多個并成一個，拆分之后呢，每個多帶帶管理一個改造使之支持添加并修改計算邏輯可能是一個經(jīng)過的對象所以需要判斷是否是一個對象如果是那說明這是一個復(fù)合的需要循

0x001 概述

這一章講多個reducer怎么處理，并將ledux搞成支持支持多個reducer

0x002 拆封reducer 
import {createStore, combineReducers} from "redux"

const ACTION_NUM1_INCREMENT = "ACTION_NUM1_INCREMENT"
const ACTION_NUM2_INCREMENT = "ACTION_NUM2_INCREMENT"

const num1 = (state = 0, action) => {
    switch (action.type) {
        case ACTION_NUM1_INCREMENT: {
            return ++state
        }
        default: {
            return state
        }
    }
}

const num2 = (state = 0, action) => {
    switch ((action.type)) {
        case ACTION_NUM2_INCREMENT: {
            return ++state
        }
        default: {
            return state
        }
    }
}

const reducer = combineReducers({
    num1: num1,
    num2: num2
})
let store = createStore(reducer)

store.subscribe(() => {
    console.log(store.getState())
})

store.dispatch({type: ACTION_NUM1_INCREMENT})
store.dispatch({type: ACTION_NUM2_INCREMENT})

查看瀏覽器

就是這么簡單了，核心函數(shù)是：combineReducers(reducers)，將多個reducer并成一個，拆分之后呢，每個reducer多帶帶管理一個state

0x002 改造ledux使之支持combineReducers

添加combineReducers并修改state計算邏輯

class Ledux {
    static createStore(reduer) {
        return new Store(reduer)
    }

    static combineReducers(reducers) {
        return reducers
    }
}

class Store {
    constructor(reducer) {
        this.state = this.calculateState(reducer)
        this.callbacks = []
        this.reducer = reducer
    }

    subscribe(callback) {
        this.callbacks.push(callback)
    }

    getState() {
        return this.state
    }

    dispatch(action) {
        this.state = this.calculateState(this.reducer, action)
        this.callbacks.forEach(callback => callback())
    }

    /**
     * reducer 可能是一個經(jīng)過 combineReducers 的對象
     * 所以需要判斷 reducer 是否是一個對象
     * 如果是
     *  那說明這是一個復(fù)合的 reducer
     *  需要循環(huán)計算出每個 state
     *  并以對象的形式保存到 state
     * 如果不是對象并且是函數(shù)
     *  那說明這是一個單一的 reducer
     *  直接計算就行了
     *  然后保存到 state
     *
     * @param reducer 單一的 reducer 函數(shù)或者 combineReducers 之后的對象
     * @param action
     * @returns {*}
     */
    calculateState(reducer, action = {}) {
        if (typeof reducer === "object") {
            return Object.keys(reducer).map((key) => {
                return {
                    [key]: reducer[key](undefined, action)
                }
            }).reduce((pre, current) => {
                return {...pre, ...current}
            })
        } else if (typeof reducer === "function") {
            return reducer(undefined, action)
        }
    }
}
/**
 * 添加幾個函數(shù)導(dǎo)出
 * 保持和 redux 一致的 api
 * 這樣就可以不修改調(diào)用的函數(shù)了
 */
const createStore = Ledux.createStore
const combineReducers = Ledux.combineReducers
export {createStore, combineReducers}
export default Ledux

修改調(diào)用

// 直接修改 redux 引入就好了
import {createStore, combineReducers} from "./ledux"
0x003 總結(jié)

無

0x004 資源

源碼

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97380.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 初見

    摘要：函數(shù)的作用是，返回一個最終的函數(shù)，做的事情是得到一個由多個不同函數(shù)作為可以自定義的對象。把數(shù)據(jù)放到一個對象列表中，每個數(shù)據(jù)用作為主鍵。不同類型的對象通過引用數(shù)據(jù)，這樣數(shù)據(jù)發(fā)生改變的時候，只需要修改一處地方，減少數(shù)據(jù)冗余或者混用。 Redux初見 本文記錄的是自己對redux的學(xué)習(xí)和理解，希望可以簡潔易懂，入門redux，一步步的走進(jìn)redux! Redux是什么 Redux是Java...

    trigkit4 評論0 收藏0

  • Redux 入門

    摘要：系列文章入門本文進(jìn)階番外篇狀態(tài)管理，第一次聽到這個詞要追溯到去年年底。只讀的唯一改變的方法就是觸發(fā)，是一個用于描述已發(fā)生事件的普通對象。沒有特殊情況沒有副作用，沒有請求沒有變量修改，只進(jìn)行單純執(zhí)行計算。 系列文章: Redux 入門(本文) Redux 進(jìn)階 番外篇: Vuex — The core of Vue application 狀態(tài)管理，第一次聽到這個詞要追溯到去年年...

    shusen 評論0 收藏0

  • React 入門實踐

    摘要：更多相關(guān)介紹請看這特點僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數(shù)據(jù)流很大程度減少了重復(fù)代碼的使用組件化可組合一個組件易于和其它組件一起使用，或者嵌套在另一個組件內(nèi)部。在使用后，就變得很容易維護(hù)，而且數(shù)據(jù)流非常清晰，容易解決遇到的。 歡迎移步我的博客閱讀：《React 入門實踐》 在寫這篇文章之前，我已經(jīng)接觸 React 有大半年了。在初步學(xué)習(xí) React 之后就正式應(yīng)用到項...

    shenhualong 評論0 收藏0

  • Redux技術(shù)架構(gòu)簡介

    摘要：是一個程序架構(gòu)，源于提出的一種架構(gòu)，然而，它不僅可以應(yīng)用于，還可以應(yīng)用于其他任何框架中。有以下職責(zé)維持應(yīng)用的提供方法獲取提供方法更新通過注冊監(jiān)聽器通過返回的函數(shù)注銷監(jiān)聽器。同時，的返回值實際上是一個函數(shù)可以解除監(jiān)聽。 Redux是一個程序架構(gòu)，源于Flux（Facebook提出的一種架構(gòu)），然而，它不僅可以應(yīng)用于React，還可以應(yīng)用于其他任何框架中。值得一提的是，Redux的源代碼很...

    weizx 評論0 收藏0

發(fā)表評論

0條評論

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