Redux系列之分析中间件原理（附经验分享）

我的前端学习笔记📒

最近花了点时间把笔记整理到语雀上了，方便童鞋们阅读

<div class="output_wrapper" id="output_wrapper_id" style="font-size: 15px; color: rgb(62, 62, 62); line-height: 1.8; word-spacing: 2px; letter-spacing: 2px; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;"><blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 前提：公司兼容了两种技术栈<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Vue</code>和<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">React</code>，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Vue</code>研究的比较多一些，反观<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">React</code>还停留在<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">查官方文档阶段</code>，最近刚好维护了一个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">React项目</code>，项目中用到<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>，借此重新复习<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code> </blockquote> <h2 id="hredux" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.4em;">Redux</h2> <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 一句话介绍<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>:<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux是一个可预测化的JavaScript状态管理容器。</code> </blockquote> <h3 id="h" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">三大原则 </h3> <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 理解<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>离不开这三大原则 </blockquote> <h4 id="h-1" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">单一数据源</h4> 整个应用的 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">state</code> 被储存在一棵 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">object tree</code> 中，并且这个 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">object tree</code> 只存在于唯一一个 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">store</code> 中。 <h4 id="hstate" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">State 是只读的</h4> 唯一改变 state 的方法就是触发 action，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">action 是一个用于描述已发生事件的普通对象。</code> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">store.dispatch({   type: 'COMPLETE_TODO',   index: 1 }) </code></pre> <h4 id="h-2" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">使用纯函数来执行修改</h4> 为了描述 action 如何改变 state tree ，你需要编写 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">reducers</code>。action是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">描述修改操作</code>，而真正去操作修改state是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">reducers</code> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">function reducer(state = [], action) {   switch (action.type) {     case 'ADD_TODO':       return [         ...state,         {           text: action.text,           completed: false         }       ]     case 'COMPLETE_TODO':       return state.map((todo, index) => {         if (index === action.index) {           return Object.assign({}, todo, {             completed: true           })         }         return todo       })     default:       return state   } } </code></pre> 通过上面👆的分析我们得到三个关键的信息点：<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">state</code>,<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">action</code>,<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">reducers</code> <h3 id="h-3" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">概念 </h3> <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 在复习工作流之前我们先来搞清楚几个概念，以下的概念解释都出自于<a href="https://cn.redux.js.org/docs/Glossary.html" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">词汇表 </a>, 为了方便阅读，我就<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">摘抄</code>过来了 </blockquote> <h4 id="hstate-1" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">State</h4> <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">State</code> (也称为 state tree) 是一个宽泛的概念，但是在 Redux API 中，通常是指一个唯一的 state 值，由 store 管理且由 getState() 方法获得。它表示了 Redux 应用的全部状态，通常为一个多层嵌套的对象。 <h5 id="h-4" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1em;">约定俗成</h5> 顶层 state 或为一个对象，或像 Map 那样的键-值集合，也可以是任意的数据类型。然而你应尽可能确保 state 可以被序列化，而且不要把什么数据都放进去，导致无法轻松地把 state 转换成 JSON。 <h4 id="haction" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">Action</h4> Action 是一个普通对象，用来表示即将改变 state 的意图。它是将数据放入 store 的唯一途径。无论是从 UI 事件、网络回调，还是其他诸如 WebSocket 之类的数据源所获得的数据，最终都会被 dispatch 成 action。 <h5 id="h-5" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1em;">约定俗成</h5> action 必须拥有一个 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">type 域</code>，它指明了需要被执行的 action type。Type 可以被定义为常量，然后从其他 module 导入。比起用 Symbols 表示 type，使用 String 是更好的方法，因为 string 可以被序列化。 <h4 id="hreducer" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">Reducer</h4> Reducer (也称为 reducing function) 函数接受两个参数：之前累积运算的结果和当前被累积的值，返回的是一个新的累积结果。该函数把一个集合归并成一个单值。 在 Redux 中，累计运算的结果是 state 对象，而被累积的值是 action。Reducer 由上次累积的结果 state 与当前被累积的 action 计算得到一个新 state。这些 Reducer 必须是纯函数，而且当输入相同时返回的结果也会相同。它们不应该产生任何副作用。正因如此，才使得诸如热重载和时间旅行这些很棒的功能成为可能。 <h4 id="hdispatch" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">dispatch 函数</h4> <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispatching function</code>(或简言之 dispatch function) 是一个接收 action 或者异步 action的函数，该函数要么往 store <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">分发一个或多个 action</code>，要么不分发任何 action。 <h4 id="hactioncreator" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">Action Creator</h4> <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Action Creator</code> 很简单，就是一个创建 action 的函数。不要混淆 action 和 action creator 这两个概念。Action 是一个信息的负载，而 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">action creator 是一个创建 action 的工厂</code>。 <h4 id="haction-1" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">异步 Action</h4> <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">异步 action 是一个发给 dispatching 函数的值</code>，但是这个值还不能被 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">reducer 消费</code>。在发往 base dispatch() function 之前，middleware 会把异步 action 转换成一个或一组 action。<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">异步 action 可以有多种 type</code>，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">这取决于你所使用的 middleware</code>。它通常是 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Promise 或者 thunk 之类的异步原生数据类型</code>，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">虽然不会立即把数据传递给 reducer，但是一旦操作完成就会触发 action 的分发事件</code>。 <h4 id="hmiddleware" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">Middleware</h4> Middleware 是一个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">组合 dispatch function 的高阶函数</code>，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">返回一个新的 dispatch function</code>，通常将异步 actions 转换成 action。 ❗️❗️这也是接下来我们要重点分析 最后放出一张<a href="xx" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">记忆脑图</a> ><img src="https://user-gold-cdn.xitu.io/2020/4/17/17185e4a7e1569d2?w=1564&h=1392&f=png&s=499217" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"> <h3 id="hredux-1" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">Redux工作流 </h3> <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 了解了<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">三大原则</code>以及<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">概念</code>以后，来看看Redux的工作流吧 </blockquote> <img src="https://user-gold-cdn.xitu.io/2020/4/17/17183d3a22d5ac8e?w=800&h=417&f=png&s=175306" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"> 对比下图就能轻松理解了 <img src="https://user-gold-cdn.xitu.io/2020/4/17/17183db51e2fcaf4?w=5124&h=2456&f=png&s=2744408" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"> 从图中我们知道Redux是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">单向数据流</code>，那么根据上面所学的知识我们来设计下我们的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux目录结构</code>吧 <img src="https://user-gold-cdn.xitu.io/2020/4/17/17183df45ebb8b1d?w=614&h=256&f=png&s=20379" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"> 如上图，大部分公司的Redux目录结构应该<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">类似</code>这样，我们需要<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">actionCreators</code>文件来创建我们的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">action</code>，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">action对象</code>必须拥有一个 <code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">type 域</code>,<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">然后reducer根据不同的type触发对应的操作</code>,所以创建<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">actionTypes</code>文件，接下来就是处理<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">reducer了</code>来修改我们的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">state</code>,所以创建<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">reducer</code>文件📃，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">所以明白上述概念，有助于我们对目录结构的理解</code>，而不是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">傻乎乎的跟着别人的目录结构照猫画虎的创建</code>,起码要明白为什么这样<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">划分</code> <h3 id="hcompose" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">compose聚合函数 </h3> <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 再看中间件原理时，我们来实现下<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">compose函数</code>,理解它对于理解我们中间件原理有很大帮助 </blockquote> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">dispatch=fn1(fn2(fn3)) dispatch=compose(fn1,fn2,fn3) </code></pre> 我们期待有一个聚合的方法compose,可以这样使用,参数从右至左，将第一个参数fn3作为第二个参数fn2的参数，并将运行结果作为第三个参数fn1的参数，依次递推，最终返回一个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">新的函数</code>,这个新函数在基础函数<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">f3</code>的基础上，得到了<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">所有的高阶函数的能力</code>,🤔思考：假设这个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">f3参数</code>是换成是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispatch函数</code>呢？，不着急，我们接着往下分析compose函数的实现 <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">// compose聚合函数的顺序是从右到左 from right to left const compose = function (...funcs) {     return funcs.reduce((a, b) => {         return (...args) => {            return a(b(...args))         }     }) } </code></pre> 这些串联函数不优雅。<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">ES6 的箭头函数简写</code> ，从而看起来更舒服一些 <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;"> function compose(...funcs) {   return funcs.reduce((a, b) => (...args) => a(b(...args))) } </code></pre> 所以<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">compose(fn1, fn2, fn3) (...args) 相当于 fn1(fn2(fn3(...args)))</code> <h3 id="hredux-2" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">Redux中间件原理 </h3> <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 讲清楚了上述👆基本内容后，到了本问的关键点了，那就是Redux中间件是用来干嘛的，原理是什么❓ </blockquote> 前面分析<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux工作流</code>，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Action</code>发出以后，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Reducer</code> 立即算出 State，是个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">同步流程</code>，那么想想如何支持<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">异步操作</code>,不单单支持<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">异步操作</code>，还要支持<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">错误处理、日志监控</code>，那么是在<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux工作流</code>哪个环节进行拦截操作呢❓，答案是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispatch过程</code>，在<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">分发action</code>进行<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">拦截处理</code> 在Redux中，与中间件的实现相关联的方法是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">applyMiddleware</code>，所以我们来分析下这个方法吧（这里笔者提供一份调试<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">中间件代码</code>，<a href="https://github.com/vnues/redux-middleware" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">点击进入仓库</a> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">// 调用applyMiddleware applyMiddleware(thunk, logger) export default function applyMiddleware(...middlewares) {   return createStore => (...args) => {     const store = createStore(...args)     let dispatch = () => {       throw new Error(         'Dispatching while constructing your middleware is not allowed. ' +         'Other middleware would not be applied to this dispatch.'       )     }     const middlewareAPI = {       getState: store.getState,       dispatch: (...args) => {         return dispatch(...args)       }     }     const chain = middlewares.map(middleware => middleware(middlewareAPI))     dispatch = compose(...chain)(store.dispatch)     return {       ...store,       dispatch     }   } } </code></pre> 可以看到<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispatch = compose(...chain)(store.dispatch)</code>这行关键代码，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>为了支持<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">中间件</code>，内部重写了原来的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispatch方法</code>，同时最后传入原来的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">store.dispatch</code>方法，也就是将原来的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">disptach方法</code>也当做<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">中间件处理了</code> 分析到这里，我们可以知道<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">传入的中间件</code>被<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">compose函数聚合</code>后改写dispatch方法，所以我们也可以理解成中间件是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">对dispatch方法的增强</code>,比如说:<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">增强dispatch函数对action是函数、Promise的处理</code> 举个例子🌰 <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 仓库内修改成这段代码 </blockquote> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">function logger(store) {     return function wrapDispatchToAddLogging(next) {         return function dispatchAndLog(action) {             let result = next(action)             return result         }     } } function thunk({ dispatch, getState }) {     return function wrapDispatchToThunk(next) {         return function dispatchThunk(action) {             if (typeof action === 'function') {                 return action(dispatch, getState);             }             return next(action);         }     } } applyMiddleware(thunk, logger)  // 相当于 wrapDispatchToThunk(wrapDispatchToAddLogging(dispatch))   </code></pre> 打印<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispatch</code>方法 <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">dispatchThunk(action) {             if (typeof action === 'function') {                 return action(dispatch, getState);             }             return next(action);     } </code></pre> 转换next <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">// 转换next dispatchThunk(action) {             if (typeof action === 'function') {                 return action(dispatch, getState);             }             // next(action)             // 这里的next由来是执行logger方法返回了dispatchAndLog函数             return (function dispatchAndLog(action) {             let result = next(action)             return result         })(action)    }    </code></pre> 继续转换next <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 看到<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispatchAndLog</code>函数里还有个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">next</code>，我们继续转换 </blockquote> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">// 转换next dispatchThunk(action) {             if (typeof action === 'function') {                 return action(dispatch, getState);             }             // next(action)             // 这里的next由来是执行logger方法返回了dispatchAndLog函数             return (function dispatchAndLog(action) {             // let result = next(action)            // 这里的dispatch是原来的dispacth             let result=(function(action){dispatch(action)})(action)                          return result         })(action)    }    </code></pre> 看到这里我们已经知道，Redux实现中间件的原理核心是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">增强原来dispatch函数的能力</code>，然函数拥有<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">某种能力</code>自然而然想到<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">高阶函数</code>的处理方式，compose 方法将新的 middlewares 和 store.dispatch 结合起来，生成一个新的 dispatch 方法，另外通过<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">改写后的dispatch</code>方法，可以确定<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux中间件</code>也是基于<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">洋葱模型</code> <h4 id="h-6" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">中间件的执行顺序</h4> <blockquote style="line-height: inherit; display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;"> 执行顺序遵从<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">洋葱模型</code> </blockquote> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="hljs" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">  applyMiddleware(      logger，     thunk   ) </code></pre> <img src="https://user-gold-cdn.xitu.io/2020/4/17/1718677cad870b1c?w=872&h=587&f=png&s=186711" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"> <h3 id="hredux-3" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">如何写Redux中间件 </h3> 工作中我们明白了<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux工作流</code>的情况下，其实干扰最多的可能就是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux中间件了</code>，常用的有<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">redux-thunk、redux-soga、redux-promise</code>等等，所以掌握中间件原理还是很重要的，那么如何去写一个中间件❓，我们通过继续分析<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">applyMiddleware</code>方法 <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">export default function applyMiddleware(...middlewares) {   return createStore => (...args) => {     const store = createStore(...args)     let dispatch = () => {       throw new Error(         'Dispatching while constructing your middleware is not allowed. ' +         'Other middleware would not be applied to this dispatch.'       )     }     const middlewareAPI = {       getState: store.getState,       dispatch: (...args) => {         return dispatch(...args)       }     }     // 这里执行了一层中间件接收了{store.getState,dispatch}参数     const chain = middlewares.map(middleware => middleware(middlewareAPI))     // compose(...chain)(store.dispatch) 相当于fn1(fn2(fn3(store.dispatch)))     // 又执行了一层中间件 这一层接收next参数 也就是下一个中间件参数     dispatch = compose(...chain)(store.dispatch)     return {       ...store,       dispatch     }   } } </code></pre> 通过上面👆的分析可知，一个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux中间件</code>的基本形式（结构）如下 <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">// 中间件逻辑代码需要经过三次柯里化 store => next => action => {   // 中间件逻辑代码 } </code></pre> <h4 id="hredux-4" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">Redux支持异步操作</h4> <ul style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; padding-left: 32px; list-style-type: disc;"> <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;">强化<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispacth函数</code>,让其能解析<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">action为函数形式</code>，从而让Redux支持异步操作</li> <li style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px; margin-bottom: 0.5em;">强化<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">dispacth函数</code>,让其能解析<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">action为Promise对象形式</code>，从而让Redux支持异步操作</li> </ul> <h5 id="hreduxthunk" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1em;">redux-thunk</h5> 根据这个<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">中间件结构</code>我们来分析<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">redux-thunk</code>中间件的源码 <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">function createThunkMiddleware(extraArgument) {   return ({ dispatch, getState }) => (next) => (action) => {     // 如果是函数 thunk来处理     if (typeof action === 'function') {       return action(dispatch, getState, extraArgument);     }     // 其它处理不了，交给下一个中间件处理     return next(action);   }; } const thunk = createThunkMiddleware(); </code></pre> 嗯嗯…,<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">redux-thunk</code>就这么几行源代码就实现了支持<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux异步操作</code> <h4 id="hreduxpromise" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; font-size: 1.2em;">redux-promise</h4> 用法 <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">  const testRes = () => {       return new Promise((res, rej) => {           res({               type: 'TEST_RESOLVE'           })       });   }   store.dispatch(testRes()); </code></pre> <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">// redux-promise简易版源码 const vanillaPromise = store => next => action => {   // 判断不是Promise对象，交给下个中间件处理   if (typeof action.then !== 'function') {     return next(action)   }   // action为Promise对象，promise中间件能做处理   // 最后异步执行完触发执行store.dispatch ---> (...args) =>  dispatch(...args)   return Promise.resolve(action).then(store.dispatch) } </code></pre> <h3 id="hredux-5" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;"><span style="font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">改造我们的Redux项目 </h3> 一句话<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>用起来<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">太笨重了</code>，去年实习期开始写<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">React</code>项目时候，跟着别人的风格来写而已，直到维护同事的<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">React</code>项目，才猛然意识到项目中糟糕<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>写法，滥用<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>，导致了这个项目是<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">灾难级别的</code> 后面意识到能不能二次封装下<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">Redux</code>,简化写法 比如： <pre style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;"><code class="js language-js hljs javascript" style="overflow-wrap: break-word; margin: 0px 2px; line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px; font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; color: rgb(169, 183, 198); background: rgb(40, 43, 46); overflow-x: auto; padding: 0.5em; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow: auto !important; display: -webkit-box !important;">import { createModel } from "../../../model.js"; const model = {   namespace: 'counter',   state: {     count: 10   },   reducer: {     add(state: any, action: any) { // counter/add       state.count += 1     },     minus(state: any, action: any) {       state.count--     },   } } export default createModel(model) </code></pre> <img src="https://user-gold-cdn.xitu.io/2020/4/17/1718731ac6f81272?w=1430&h=1414&f=png&s=270186" alt="" title="" style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; display: block; margin: 0px auto; max-width: 100%;"> enennene….就有了以上对话，也感谢大佬的帮助,最后选用了<a href="https://github.com/rematch/rematch" style="font-size: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;">remacth</a>方案，这个库也挺好友好，<code style="font-size: inherit; line-height: inherit; overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(230, 81, 0); background: rgb(248, 248, 248);">兼容了老的写法</code>，具体可以细看这个它的文档，这里就不做分析了</div> ## 我的前端学习笔记📒 最近花了点时间把笔记`整理到语雀上`了，方便`童鞋们阅读`

Redux系列之分析中间件原理（附经验分享）

我的前端学习笔记📒

评论区

相关推荐