1.重读Redux源码的感悟
2.Redux(4.0.4)源码解析
3.JavaScript之reduce()的用法
4.slate.js源码分析（四）- 历史记录机制
5.计算机开发|Github上8个很棒的React项目
6.2022 在线玩小时候的游戏机源码

重读Redux源码的感悟

       大道至简的createStore

       创造理解的%在createStore.js中体现，剩下%涉及中间件，整体来看软件开发追求高内聚，内耦合，以简洁面世。Redux源码由9个文件构成，elementui admin 源码分析包含中间件的代码。整体而言，Redux的深层含义超出了源码大小所能体现，业界常言“Redux是百行代码千行文档”，强调其复杂性。

       回到createStore.js，剥离中间件影响，仅留下核心代码骨架。最终返回的对象即store，提供了常用API。通过观察者模式或发布/订阅模式理解此框架，但要认识到Redux并非仅此，它结合现代前端开发与函数式编程，带来限制与便利，如纯函数要求、测试便利性、功能解耦及性能优化。

       实现撤销功能（undo）示例，通过高阶reducer存储过往状态值，结合Redux实现撤销与重做。函数式编程的FP特性，使实现变得可能。

       combineReducer利用闭包概念，接收多个reducer，生成单个reducer，可遍历执行所有reducer。若两个reducer同时处理相同type的action，它们都会执行更新状态。此特性可能带来冲突，需合理命名以避免问题。

       使用CLI工具搭建开发环境可能耗时，交易猫系统源码codesandbox.io提供多种框架支持及快速加载依赖，适合灵感突发时快速测试代码。

       在命名Action时，采用namespace前缀（如/或@）可避免重复，有助于清晰管理状态与减少冲突。

       compose方法实现多个方法串联执行，功能强大，易于实现并用于中间件处理。在Redux中，中间件处理Action，与服务器端处理request、response的Koa或Express不同，但核心原理相似，利用compose方法串联功能。

       中间件本质为方法代理，通过增强原方法执行前后添加操作，实现AOP。在Redux中，中间件位于store.dispatch之前，通过代理dispatch实现场景扩展与功能增强。理解中间件需关注enhancer参数及createStore方法传递，最后实现store与中间件串联。

       以redux-thunk为例，底层参数接收中间件API，只传递store的getState和dispatch方法，遵循特定逻辑处理action，提供方法执行选择与状态管理。中间件使用时需阅读文档，理解其规范与实现细节。

       综上，Redux源码展示了现代前端开发与函数式编程的结合，从createStore、combineReducer到中间件，提供了高效状态管理与功能扩展。理解其核心概念与实现机制，有助于深入应用与开发。银联返回源码

Redux(4.0.4)源码解析

       Redux源码解析

       Redux源代码解析旨在清晰展示其核心组件及工作流程，力求用最简洁的语言阐述每个关键部分的功能。Redux提供了一个状态管理库，以管理应用的全局状态。以下是Redux核心组件的主要解析：

       createStore.js

       export default function createStore(reducer, preloadedState, enhancer)

       createStore函数是Redux的核心，负责创建一个状态存储对象。它可以接受三个参数：reducer（减少操作函数）、预加载状态（初始状态）和增强器（可选参数，用于添加额外功能）。

       getState

       获取当前状态，操作简单直接。

       subscribe

       向监听列表中添加监听函数，返回取消监听函数。在调用dispatch时订阅或取消订阅，不会影响正在进行的dispatch。下一次dispatch时，将使用订阅列表的最新快照。

       dispatch

       执行reducer获取最新状态，并依次执行监听队列中的函数。

       replaceReducer

       替换当前的reducer。执行后，dispatch一次更新状态。一般不常用。

       observable

       未见实际应用，可能用于特定场景。使用了symbol-observable包，对于熟悉该包的开发者来说，此部分可能有更多探索空间。

       utils

       包括actionTypes.js、isPlainObject.js、warning.js等辅助函数。actionTypes.js定义了Redux保留的私有操作类型，用于确保操作的正确处理。isPlainObject.js用于判断action对象是否为原生对象。warning.js用于抛出错误，保持代码质量。docker配源码笔记

       applyMiddleware.js

       通过createStore(reducer,applyMiddleware(...middleware))执行，返回带有中间件增强的dispatch。精简后，代码更加清晰。

       compose.js

       实现中间件的串联，依次增强dispatch流程。使用函数式编程技巧，代码简洁高效。

       bindActionCreators.js

       将单个或多个ActionCreator转化为dispatch(action)的函数集合，简化Action的使用方式。

       combineReducers.js

       将多个reducer整合为一个，调整state结构，便于管理和操作。

       整体而言，Redux的源码解析展示了其如何通过一系列核心组件实现状态管理的流程，从创建store到管理state、执行reducer、中间件串联，直至整合多个reducer，提供了一套高效、模块化的状态管理方案。理解这些组件及其功能是掌握Redux并能灵活应用的关键。

JavaScript之reduce()的用法

       首先，参考了这位大佬的总结，敲了一遍，收获很大。记录下来。参考链接

背景：

       之前是接触vue源码的时候，发现使用reduce的地方很多。当时也是在看别人分享，简单带过，发现很好用。简单研究后，很少用到。导致理解不深。今天碰到到使用场景，爱心表白代码源码特意花时间研究了一番，可以说理解的很到位了。

语法arr.reduce(function(prev,cur,index,arr){ ...},init);

       其中，\arr表示原数组；\prev表示上一次调用回调时的返回值，或者初始值init;\cur表示当前正在处理的数组元素；\index表示当前正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1；\init表示初始值。这个初始值在很多技巧上要用到，要重点留意

       在实际使用当中，其实常用的参数只有两个：prev和cur。结合例子来分析一番。

实例

       以下举的例子除了用reduce来实现，还有很多其他的方法。不过使用reduce有它独有的技巧性和方便。

1、求数组的和

       方式一：

letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);

       方式二：

letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;},0)console.log(sum);

       注意：方式二，由于传入了初始值0，所以pre的初始值就是0，cur的值，就是数组的第一个值为3；如果不传初始值的话，就如方式一，这时，pre的值是3，cur的值是4；相加后为7，作为下一轮的pre的值，cur是5，依次类推下去。

2、求数组的最大值

       方式一：

letarr=[1,4,5,6,9,2,4,6];letmax=arr.reduce((pre,cur)=>{ returnMath.max(pre,cur)})console.log(max);

       方式二：

letmax2=arr.reduce((pre,cur)=>{ returnpre>cur?pre:cur;})console.log('max2:',max2);3、给数组去重letnewArr=arr.reduce((pre,cur)=>{ pre.indexOf(cur)===-1&&pre.push(cur)returnpre},[])console.log(newArr);进阶用法1.求字符串中字幕出现的次数conststr='sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';constres=str.split('').reduce((pre,cur)=>{ pre[cur]?pre[cur]++:pre[cur]=1;returnpre},{ })console.log('汇总次数：',res);2.数组转数组letarr1=[2,3,4,5,6,7];letnewArr1=arr1.reduce((pre,cur)=>{ pre.push(cur*cur)returnpre;},[])console.log('数组转数组：',newArr1);3.数组转对象letstreams=[{ name:'博士',id:1},{ name:'硕士',id:2},{ name:'本科',id:3}];letobj1=streams.reduce((pre,cur)=>{ pre[cur.id]=cur;returnpre;},{ })console.log('数组转对象：',obj1);高级用法1.多维的叠加执行操作

       例子：各科成绩占比不一样，求结果

constresult=[{ subject:'math',score:},{ subject:'chinese',score:},{ subject:'english',score:},];constdis={ math:0.5,chinese:0.2,english:0.4};letres2=result.reduce((pre,cur)=>{ returndis[cur.subject]*cur.score+pre},0)console.log('多维叠加：',res2);

       加大难度：商品对应不同国家汇率不同，求价格

letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);、扁平一个二维数组letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);1

       多维数组扁平化

3、对象数组去重letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);、compose函数

       reduxcompose源码实现

letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);3

slate.js源码分析（四）- 历史记录机制

       应用中常见撤销与重做功能，尤其在编辑器中，其实现看似简单却也非易事。为了更好地理解这一机制，本文将深入探讨 MVC 设计模式，并聚焦于 slate.js 如何巧妙地实现撤销与重做功能。

       MVC 模式是一种经典的软件架构模式，自 年提出以来便广为应用。在 MVC 模式中，模型（Model）负责管理数据，视图（View）展示数据，而控制器（Controller）则负责处理用户输入与模型更新。

       在撤销与重做功能的设计中，通常有两种实现思路。其中一种是通过 Redux 等状态管理库实现，而 slate.js 则采用了一种更为直接的方法。本文将重点介绍 slate.js 的实现策略。

       撤销功能允许用户回溯至之前的页面状态，而重做功能则让用户能够恢复已撤销的操作。在执行操作后，当用户请求撤销时，系统会抛弃当前状态并恢复至前一状态。对于复杂的操作，如表格的复制与粘贴，系统的处理逻辑则更为精细，能够跳过不需要记录在历史记录中的状态，确保撤销操作的精准性。

       slate.js 的状态模型主要基于树状的文档结构，通过三种类型的操作指令来管理文档状态：针对节点的修改、光标位置的调整以及文本内容的变更。对节点与文本的修改，可通过特定指令来实现，而光标操作则通常直接修改数据。借助这九种基本操作，富文本内容的任何变化都能被准确地记录与恢复。

       在实现撤销功能时，关键在于如何根据操作指令中的信息推导出相应的撤销操作。例如，撤销对节点的修改操作，只需对记录的操作进行逆向操作即可。相比之下，重做功能则相对简单，只需在撤销操作时记录下指令，以便在后续操作中恢复。

       操作的记录以数组形式进行，便于后续的撤销与重做操作。通过合理的指令与数据模型设计，复杂的操作最终被拆解为简单且可逆的原子操作，确保了功能的高效与稳定。

       总结而言，通过精心设计的指令与数据模型，撤销与重做功能得以实现，使应用在面对用户操作时能够灵活应对，提供无缝的用户体验。此外，本文还附带了一个招聘信息，百度如流团队正面向北京、上海、深圳等地招聘，欢迎有志之士加入。

       参考资料包括：Web 应用的撤销重做实现、slatejs。

计算机开发|Github上8个很棒的React项目

       来自公众号：前端充电宝

       今天分享 Github 上 8 个很棒的 React 项目，旨在通过学习这些项目的源码，帮助大家更好地理解 React，并编写出更优雅的 React 代码！

       概览：

       1. React Tetris

       React Tetris 是一个使用 React、Redux、Immutable 制作的俄罗斯方块游戏。它是一个适用于 React 学习者的练习项目，通过优化和打磨细节，可以提升开发者对 React 的掌握。项目介绍中包含作者的开发想法，提供中文资源，非常值得借鉴。

       Github：github.com/chvin/react...

       2. Kutt.it

       Kutt 是一个现代的 URL 缩短器，支持自定义域名。它集成 Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、Redis 等技术，提供功能丰富的 URL 缩短服务。

       Github：github.com/thedevs-netw...

       3. Win in React

       通过这个项目，开发者使用 React、CSS (SCSS) 和 JS 等标准 Web 技术在浏览器中复制 Windows 桌面体验。该项目展示了在 Web 上重现操作系统的可能性。

       Github：github.com/blueedgetech...

       4. JoL-player

       JoL-player 是一个功能强大的 React 播放器，通过高质量的 React 组件、TypeScript 开发和完整的类型定义文件，提供国际化语言、强大的 API 和功能。支持 React +版本。

       Github：github.com/lgf/JoL-p...

       5. Take Note

       TakeNote 是一个 Web 笔记应用，提供搜索、多光标编辑、链接笔记、语法高亮、键盘快捷键等功能。它基于 TypeScript、React、Redux、Node、Express 等技术创建，支持本地存储和 zip 格式的下载。

       Github：github.com/taniarascia...

       6. Fiora

       Fiora 是一个基于 Node.js、React 和 socket.io 的聊天应用程序，支持添加好友、群聊、设置主题、消息提醒等，适用于 Windows / Linux / macOS 系统。

       Github：github.com/yinxin/fi...

       7. Todoist clone

       Todoist clone 是一个使用 create-react-app 构建的 Todoist 的简化版，包含 React（自定义 Hooks、context）、Firebase 和 React 测试库。项目使用 SCSS (CSS) 和 BEM 命名方法，旨在帮助开发者更好地理解 React。

       Github：github.com/karlhadwen/t...

       8. Jira Clone

       Jira Clone 是一个使用 React 开发的简化版 Jira 工具，提供交互式用户界面。它使用 React 以及 webpack、Node.js、ESLint、styled-components 和 cypress 构建，支持最新的 React 特性。

       Github：github.com/oldboyxx/jir...

在线玩小时候的游戏机源码

       以React、Redux、Immutable为工具，我尝试将经典的俄罗斯方块游戏在网页上复现。

       开发时，我首先利用React构建了游戏的核心结构与逻辑，这使得游戏的界面与交互逻辑分离，便于维护与扩展。接着，我引入Redux来管理游戏状态，确保了游戏状态的统一和可预测性。同时，为了增强用户体验，我利用Immutable库来处理状态变化，以避免不必要的状态复写，使得状态的更新更加高效且易于理解。

       网页设计上，我注重实现响应式布局，以确保游戏在不同设备上都能流畅运行。无论是使用键盘在PC端操作，还是在手机上通过触屏控制，都能获得良好的游戏体验。

       考虑到玩家的持续性体验，我实现了数据持久化功能。通过Redux的store.subscribe方法，将游戏状态存储在localStorage中。这样一来，即使用户关闭网页、重启或切换设备，游戏进度也能被保存，用户可以随时继续游戏，避免了因断电等意外情况导致游戏中断的问题。

       为了便于开发者和玩家跟踪游戏状态，我引入了Redux DevTools扩展。借助该工具，用户和开发者可以深入查看游戏状态的变化，这对于调试和优化游戏逻辑极为有用。这不仅提升了游戏的开发效率，也为用户提供了一个更加直观、易于理解的游戏体验。