Redux原理与实践-优快云博客

前言

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

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

构建出一个仓库

首先我们需要一个仓库，用于存放各种杂七杂八的东西，暂且我们叫做store
其次仓库里面库存有增有减，必然需要进货出货，我们就把这个动作叫做dispatch
进货出货，需要凭证，俗称进货单和出货单。这些单子取个名字叫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)
复制代码

总结：

首先仓库暴露在光天化日之下（全局）
提高修改门槛
修改时我们要通知大家

发布订阅模式实现仓库

仓库为调度中心，负责收集订单，负责库存的实时变化，以及时通知
各大批发商进货为订阅者

// 创建一个仓库
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
    }
}
复制代码