Redux入门0x103: 拆分多个 reducer

genefy 发布于2019-08-23 11:44 / 1510人阅读

摘要：概述这一章讲多个怎么处理，并将搞成支持支持多个拆封查看浏览器就是这么简单了，核心函数是，将多个并成一个，拆分之后呢，每个多带带管理一个改造使之支持添加并修改计算逻辑可能是一个经过的对象所以需要判断是否是一个对象如果是那说明这是一个复合的需要循

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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