看完这篇文章，你也可以写出Redux

小九九的爸爸2023-12-16 23:52

最近在网上看了很多关于Redux的文章，感觉很奇怪哈，为什么这么简单的东西会被很多人讲的那么复杂。官方对Redux的描述有以下几个特点：可预测、可调试、集中管理、灵活、单一数据流等等。这都能理解，毕竟营销嘛，看着就是一乐，谁开发了一个库，都会去有的没的说一些伪优点。在经历了长期的正反思考后，我得出了以下几个结论，希望能够对你有用：

  • 如果一个博主不能将复杂的理论简单化，那他一定没懂这个理论。因为再复杂的理论也是由单个知识点串起来的，所以一定不存在永远都搞不懂的理论，这只是 精力问题 + 学习方式问题。
  • 前端框架层出不穷，像redux这种第三方库就更不用提了，更新的频率只会越来越快。越是这种时候，就越考验一个人的洞察能力。就比如 状态管理，你觉着有必要使用第三方库吗？第三方库的衍生品你觉着有必要使用吗？所以在这种大环境下，对技术leader的要求就比较高，合格的技术leader更是一票难求。
  • 多读源码，多写code。眼高不手低了，洞察问题的能力自然就上去了。

接下来，我们来看看如何写出一个状态管理。

需求

一想到状态管理，其实需求就是 有一个地方，可以保存我们的状态，在有能力改变状态的同时，我们还要感知到它的变化。

这不就是所有的状态管理的库都会去做的事情嘛，剩下的就只是实现的方式不一样，扩展的能力不一样而已。

如何存储状态

2个思路，分别如下：

  • 维护全局变量。
  • 闭包。

在这里我们使用闭包的形式来实现：

javascript 复制代码 
function CustomCreateStore(){
    let state = undefined;
    let getState = () => {
        return state;
    }
    return {
        getState
    }
}

export CustomCreateStore;

有了上面的方法，我们就可以使用下面的代码来访问state了。

javascript 复制代码 
CustomCreateStore().getState();

规范state

个人认为这一步是很有必要，不能用户放进来啥我们就存啥，想要用我的库，就必须要遵守我的原则。我们希望用户可以用object的形式去保存它想要用到的变量。最简单的方式就是让用户把状态传进来。

所以改造如下：

javascript 复制代码 
function CustomCreateStore(obj){
    if( Object.prototype.toString.call(obj) !== '[object Object]' ){
        throw new Error('CustomCreateStore的参数必须是个对象');
    }
    let state = obj;
    let getState = () => {
        return state;
    }
    return {
        getState
    }
}

我们现在可以随心所欲的定义initState了。

javascript 复制代码 
CustomCreateStore({count: 1}).getState();

连接state与reducer

最开始讲需求的时候，我们就说过，一个状态管理库要包含2个能力，分别是改变状态的能力、监听状态改变的能力。

想要实现改变状态的能力，我们可以做一个桥梁，这个桥梁的作用是连接着用户的initState、保存用户改变state的方法。具体思路如下：

如何实现用户派发一个通知，然后状态管理库就知道了用户派发通知了呢？

其实很简单，我们只需要给用户暴露一个方法，只要用户调用了这个方法，状态管理库就认为你要改变状态了。

紧接着，我们如何根据通知的类型，去执行相应的更新呢？

我觉着用户实现这一步就好了。也就是库收到了这个通知，然后去执行这个通知对应的方法，至于通知是什么，通知对应的方法是什么，统统不管，我只负责收到和触发。如下：

jsx 复制代码 
let store = CustomCreateStore({count: 1});

// 通知对应的方法
function executeClickAdd(){
    return ...
}

// 点击按钮触发
const clickAddButton = () => {
    // 派发一个通知
    store.dispatch({
        type: 'click-add'
    })
}

<button onclick={ clickAddButton }> +1 </button>

那问题来了，状态管理库如何将 通知click-add 与 executeClickAdd函数联系起来？我们可以再随意一点，我哪知道你是哪个通知对应哪个方法，用户去自己想办法吧。

此时用户愤怒到了极点，但又觉得它说的有道理，所以用户维护了一个配置：

javascript 复制代码 
function ActionToExecuteOfConfig(state, action){
    switch(action.type){
        case 'click-add':
            return state + 1;
        default:
            return state;
    }
}

于是用户将上述方案交给了状态管理，并且对狠狠的说了一句，你必须要将当前state返回给我，这样我才能依据当前的state去得到下一步的state。状态管理库看到这样的配置就乐了，正符合我意，于是连夜改了createStore方法。

javascript 复制代码 
function CustomCreateStore(obj, fn){
    if( Object.prototype.toString.call(obj) !== '[object Object]' ){
        throw new Error('CustomCreateStore的参数必须是个对象');
    }
    let state = obj;
    let getState = () => {
        return state;
    }
    
    // 新增++++++
    let ActionToExecuteOfConfig = fn;
    let dispatch = (action) => {
        state = ActionToExecuteOfConfig(state, action);
    }
    
    return {
        getState,
        dispatch
    }
}

用户看到这样的方案后，也连夜修改了业务代码如下：

jsx 复制代码 
function ActionToExecuteOfConfig(state, action){
    switch(action.type){
        case 'click-add':
            return state + 1;
        default:
            return state;
    }
}


let store = CustomCreateStore({count: 1}, ActionToExecuteOfConfig);
let curData = store.getState();

// 点击按钮触发
const clickAddButton = () => {
    // 派发一个通知
    store.dispatch({
        type: 'click-add'
    })
    curData = store.getState();
}


<button onclick={ clickAddButton }> +1 </button>
<div>当前的值是：{ curData.count }</div>

点击button按钮后，页面上的数据也跟着+1了，用户露出了慈祥的笑容。

监听状态的改变

有了上面的基础，相信这个肯定难不住你们，subscribe的时候将callback push到listener队列里，最后在dispatch的末尾将listener里的callback全部依次执行即可。

jsx 复制代码 
function CustomCreateStore(obj, fn){
    if( Object.prototype.toString.call(obj) !== '[object Object]' ){
        throw new Error('CustomCreateStore的参数必须是个对象');
    }
    let state = obj;
    let listener = [];
    
    let getState = () => {
        return state;
    }
    
    // 新增++++++
    let ActionToExecuteOfConfig = fn;
    let dispatch = (action) => {
        state = ActionToExecuteOfConfig(state, action);
        // 执行监听函数
        for (let index = 0; index < listener.length; index++){
            listener[index](state);
        }
    }
    
    // 新增++++++
    let subscribe = (callback) => {
        listener.push(callback);
        return function unsubscribe(){
              const index = nextListeners.indexOf(listener)
              nextListeners.splice(index, 1)
        }
    }
    
    return {
        getState,
        dispatch,
        subscribe
    }
}

用户的代码修改如下：

jsx 复制代码 
// 其余代码不变

let store = CustomCreateStore({count: 1}, ActionToExecuteOfConfig);

store.subscribe(
    () => {
        console.log('store发生变化了');
    }
);

// 其余代码不变

此时用户再点击button +1时，发现我们注册的listener生效了。

改造state

随着应用的越来越大，做这个项目的人越来越多，因为所有的case都写在了一个ActionToExecuteOfConfig函数里，这就避免不里冲突了。你影响我，我影响你的。所以用户又给状态管理提了一个需求，你要给我想办法，我们不想所有的case都写在一个函数里，限你下班之前给我这个需求写出来，要不然我就不用你了。

于是状态管理就想了一个招，我给每个initState都动态分配一个名称name吧，在createStore的时候，我支持你传入一个对象，但是这个对象我有一个条件，value必须是用户处理action的函数。如果你想要访问自己注册的initState，就必须通过store.getState().name来访问，而这个name的值就是你的处理action得函数名。具体做法如下：

javascript 复制代码 
// 新增combineReducers函数 ++++++++++++++++++++++
function combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i];
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers);

  return function combination(state = {}, action) {
    let hasChanged = false;
    const nextState = {};
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i];
      const reducer = finalReducers[key];
      const previousStateForKey = state[key];
      const nextStateForKey = reducer(previousStateForKey, action);
      nextState[key] = nextStateForKey;
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
    }
    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length
    return hasChanged ? nextState : state
  }
}

// CustomCreateStore函数修改如下：
function CustomCreateStore(fn){
    if( Object.prototype.toString.call(obj) !== '[object Object]' ){
        throw new Error('CustomCreateStore的参数必须是个对象');
    }
    let state = obj;
    let listener = [];
    let ActionToExecuteOfConfig = fn;
    
    // 获取initState
    let getState = () => {
        return state;
    }

    // 派发通知
    let dispatch = (action) => {
        state = ActionToExecuteOfConfig(state, action);
        // 执行监听函数
        for (let index = 0; index < listener.length; index++){
            listener[index](state);
        }
    }
    
    // store的监听函数
    let subscribe = (callback) => {
        listener.push(callback);
        return function unsubscribe(){
              const index = nextListeners.indexOf(listener)
              nextListeners.splice(index, 1)
        }
    }
    
    // 初始化状态
    // 此时会执行combination函数，这个函数主要就是将所有的key对应的函数都执行一遍，最后再将key，key对应的value全部都拼到一个新的对象里
    dispatch({ type: 'initState-996' })
    
    return {
        getState,
        dispatch,
        subscribe
    }
}

用户修改业务代码如下：

javascript 复制代码 
let store  = CustomCreateStore(
    combineReducers({
        count: () => {},
        number: () => {}
    })
);

// 访问count下的initState
let count = store.getState().count.xxx;

// 访问number下的initState
let number = store.getState().number.xxx;

最后，经过这么一顿折腾，用户露出了满意的笑容。

最后

好啦，本篇文章到这里也就结束啦，希望我的文章对您有帮助，2023年12月16日，23点39分，我们下期再见啦，拜拜～～

相关推荐
pubuzhixing2 分钟前
开源白板新方案：Plait 同时支持 Angular 和 React 啦！
前端·开源·github
2401_8576009512 分钟前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_8576009512 分钟前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL13 分钟前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
小白学大数据13 分钟前
如何使用Selenium处理JavaScript动态加载的内容？
大数据·javascript·爬虫·selenium·测试工具
2402_8575834923 分钟前
基于 SSM 框架的 Vue 电脑测评系统：照亮电脑品质之路
前端·javascript·vue.js
web150850966411 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
Yvemil71 小时前
《开启微服务之旅：Spring Boot Web开发举例》（一）
前端·spring boot·微服务
java_heartLake1 小时前
Vue3之性能优化
javascript·vue.js·性能优化
Swift社区1 小时前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）