像仓管一般管理Redux

栏目: IOS · Android · 发布时间: 6年前

内容简介:数据结构指的是缓存在内存中的数据变量,包括类、函数、方法、变量以及它们的继承、聚合、回调、消息通知等关系。随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难。如果将其单独抽出来会不会更完美呢?用一个词形容:各司其职总结:

数据结构指的是缓存在内存中的数据变量,包括类、函数、方法、变量以及它们的继承、聚合、回调、消息通知等关系。

随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难。如果将其单独抽出来会不会更完美呢?用一个词形容:各司其职

构建出一个仓库

  1. 首先我们需要一个仓库,用于存放各种杂七杂八的东西,暂且我们叫做store
  2. 其次仓库里面库存有增有减,必然需要进货出货,我们就把这个动作叫做dispatch
  3. 进货出货,需要凭证,俗称进货单和出货单。这些单子取个名字叫action
// 建立个仓库,仓库里有苹果,有香蕉
var store = {
    apple: {count: 20},
    banana: {count: 30}
}
// 再去复印店进货单和出货单,出货单和进货单类型是固定,type来区分(常量),唯一不同是填写的数据
const IMPORT_APPLE = 'IMPORT_APPLE';
const EXPORT_APPLE = 'EXPORT_APPLE';
const IMPORT_BANAN = 'IMPORT_BANAN';
const EXPORT_BANAN = 'EXPORT_BANAN';

// 我们再通仓管来管理这个仓库
function dispatch(action){
    switch(action.type){
        case IMPORT_APPLE:
            store.apple.count += action.count;
            return;
        case EXPORT_APPLE:
            store.apple.count -= action.count;
            return;
        case IMPORT_BANAN:
            store.banana.count += action.count;
            return;
        case EXPORT_BANAN:
            store.banana.count -= action.count;
            return;
    }
}
// 接下来将要去进苹果
dispatch({type: IMPORT_APPLE, count: 4})
console.log(store.apple.count)
复制代码

总结:

  1. 首先仓库暴露在黄天化日之下(全局)
  2. 提高修改门槛
  3. 修改时我们要通知大家

发布订阅模式实现仓库

  1. 仓库为调度中心,负责收集订单,负责库存的实时变化,以及时通知
  2. 各大批发商进货为订阅者
// 创建一个仓库
function createStore(reducer, initalState) { // reducer用于返回新状态,可接受老状态和action
    let state = initalState;
    let listeners = []; // 负责订单管理
    // 账本用于获取仓库库存的副本
    function getState() {
        return JSON.parse(JSON.stringify(state));
    }
    // 仓管: 负责所有的库存变化,通知所有的订货商
    function dispatch(action) {
        state = reducer(state, action);
        listeners.forEach(listener => listener());
    }
    // 批发商订货, 以及取消订单
    function subscribe(fn) {
        listeners.push(fn)
        return function() {
            listeners = listeners.filter(listener => listener != fn)
        }
    }
    // 接下来我们先初始化仓库,没东西怎么能叫仓库呢
    dispatch({type:'@INIT'})
    return {
        dispatch,
        getState,
        subscribe
    }
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解深度学习

图解深度学习

[日] 山下隆义 / 张弥 / 人民邮电出版社 / 2018-5 / 59.00元

本书从深度学习的发展历程讲起,以丰富的图例从理论和实践两个层面介绍了深度学习的各种方法,以及深度学习在图像识别等领域的应用案例。内容涉及神经网络、卷积神经网络、受限玻尔兹曼机、自编码器、泛化能力的提高等。此外,还介绍了包括Theano、Pylearn2、Caffe、DIGITS、Chainer 和TensorFlow 在内的深度学习工具的安装和使用方法。 本书图例丰富,清晰直观,适合所有对深......一起来看看 《图解深度学习》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码