国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Redux入門0x103: 拆分多個(gè) reducer

genefy / 1545人閱讀

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

0x001 概述

這一章講多個(gè)reducer怎么處理，并將ledux搞成支持支持多個(gè)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)，將多個(gè)reducer并成一個(gè)，拆分之后呢，每個(gè)reducer多帶帶管理一個(gè)state

0x002 改造ledux使之支持combineReducers

添加combineReducers并修改state計(jì)算邏輯

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 可能是一個(gè)經(jīng)過 combineReducers 的對(duì)象
     * 所以需要判斷 reducer 是否是一個(gè)對(duì)象
     * 如果是
     *  那說明這是一個(gè)復(fù)合的 reducer
     *  需要循環(huán)計(jì)算出每個(gè) state
     *  并以對(duì)象的形式保存到 state
     * 如果不是對(duì)象并且是函數(shù)
     *  那說明這是一個(gè)單一的 reducer
     *  直接計(jì)算就行了
     *  然后保存到 state
     *
     * @param reducer 單一的 reducer 函數(shù)或者 combineReducers 之后的對(duì)象
     * @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)
        }
    }
}
/**
 * 添加幾個(gè)函數(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97380.html

相關(guān)文章

  • Router入門0x201: 從 URL 到 SPA

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

    honmaple 評(píng)論0 收藏0

  • Redux 初見

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

    trigkit4 評(píng)論0 收藏0

  • Redux 入門

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

    shusen 評(píng)論0 收藏0

  • React 入門實(shí)踐

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

    shenhualong 評(píng)論0 收藏0

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

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

    weizx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<