Redux入門0x103: 拆分多個 reducer

genefy 發布于2019-08-23 11:44 / 1548人閱讀

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

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})

查看瀏覽器

就是這么簡單了，核心函數是：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 可能是一個經過 combineReducers 的對象
     * 所以需要判斷 reducer 是否是一個對象
     * 如果是
     *  那說明這是一個復合的 reducer
     *  需要循環計算出每個 state
     *  并以對象的形式保存到 state
     * 如果不是對象并且是函數
     *  那說明這是一個單一的 reducer
     *  直接計算就行了
     *  然后保存到 state
     *
     * @param reducer 單一的 reducer 函數或者 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)
        }
    }
}
/**
 * 添加幾個函數導出
 * 保持和 redux 一致的 api
 * 這樣就可以不修改調用的函數了
 */
const createStore = Ledux.createStore
const combineReducers = Ledux.combineReducers
export {createStore, combineReducers}
export default Ledux

修改調用

// 直接修改 redux 引入就好了
import {createStore, combineReducers} from "./ledux"

0x003 總結

無

0x004 資源

源碼

GPU云服務器云服務器 Redux redux源碼 reducer Reducing

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

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

Router入門0x201: 從 URL 到 SPA

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

honmaple 2019-08-26 12:20 評論0 收藏0
Redux 初見

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

trigkit4 2019-08-20 10:23 評論0 收藏0
Redux 入門

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

shusen 2019-08-19 18:46 評論0 收藏0
React 入門實踐

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

shenhualong 2019-08-19 17:47 評論0 收藏0
Redux技術架構簡介

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

weizx 2019-08-22 17:05 評論0 收藏0