从 Redux 设计理念到源码分析

前语

Redux 也是我列在 THE LAST TIME 系列中的一篇，因为现在正在着手探究关于我目前正在开发的业务中状况办理的计划。所以，这儿计划先从 Redux 中学习学习，从他的状况中取取经。究竟，成M R , i P E c功总是需求站在伟人的肩膀上不是。J 4 ) T } K a

话说回来，都 2020 年了还在写 Redux{ E C w V q 的文章，真的是有些过时了。不过呢，当时 Redux 孵化过程中必定也是回头看了 Flux、CQRS、ES 等。

本篇先从 Redux 的规划理念到部分源码剖析。下一篇咱们在重视说下 Redux的 Middleware工作机制。至于手写，推荐砖家大佬的：彻底了解 redux（从零完成一个 redux）

Redux

Redux 并不是什么特别 Giao 的技能，可是其理念真的提的特别好。j F 9 S ;

说透了，它便是T m p 0 f V一个供给了 setter、getter 的大闭包，。外加一个 pubSub。。。别的的什么 reducer、middleware 还是 ac8 / d 8 ?tion什么的，都是基于他的规则和解决用C H t O户运用痛点而来的，仅此罢了。下面咱们一点点说。。。

规划思维

在 jQuery 时代的时候，咱们是面向过程开发，跟着 react 的普及，咱们提出了状况驱动 UI 的开发形式。咱们认为： Web 运用便是状况与 UI 一一对应的关系。

可是跟着咱们的g a X j 1 j i web 运用日趋的复杂化，一个运用所对应的背面的 state 也变的越来越难以办理。

而 Redux 便是咱们 Web 运用的一个状况办理计划。

如上图所示，store 便是 Redux~ ! 9 W $ 供给的一个状况容器。里边存储着 View 层所需求的一切的状况(state)。每一个 UI 都对应着背面的一个状况。Redux 也同样规V V ? , B T Z M定。一个 state 就对应一个 View。只需 statev S t N w X S 相同，View 就相同。（其实便是 state 驱动 UI）。

为什么要运用 Redux

如上b x o , ; ( # 1 m所说，咱们现在是状况驱动 UI,那么为什么需求 Redux 来办理状况呢？react 自身便是 state d5 F e _ h Y 8 z @rive view 不是。

原因还是因为现在的前端的位置现已益发的不一样啦，前端的复杂性也是越来越高。通常一个前端运用都存在许多复杂、无规律的交互。还伴跟着各种异步操作。

任何一个操作都可能会改动 state6 X n t h ,，那么就会导致咱们运用的 state 越来越乱，且被动原因益发的模糊。咱们很简略就对这些状况何时发作、为什么发作、怎样发作而失[ l J去操控。

如上，假如咱们的页面满意复杂，那么view 背面state 的改动就可能呈现出这个姿态。不同的 component 之间存在着父子、兄弟、子父、D I u 7 ] 7 9 M r甚至跨层级之间的通讯。

而咱们抱负中的状况办理应该是这个姿) P d * m H态的：

单纯的从架构层面而言8 p = W ) F 2，UI 与状况彻底别离，并且单向的数据流确保了状况可控。

而 Redux 便是做这个的！

• 每一个 State 的改动可猜测
• 动作和状况统一办理

下面简略介绍下 Redux 中的y Z n Q c K K ~几个概念e s [ % t。其实初学者往往便是对其概念而困惑。

store

保存数据的当地，你能够把它当作一个容器，整个u u P s # m运用只能有一个Store。

State

某一个时刻，存储着的运用状况值

Ach X K b Y m W U qtion

View 发出的一种让 state 发作改动的告诉

Action CreaS t ` F I Y Ator

能够了解为 Action 的工厂函数

dispatch

View F Z 3 V a = O a 发出 Action 的媒介。也是仅有途径

reduI N n H & % Rcer

依据当时接收到的ActioD . . A g n 和 State，整合出来一个全新的 State。留意是需求是纯函数

三大准则

Redux 的运用，基于以下三个准则p N ` j j

单一数据源

单一数据源这或许是与 Flux 最大的不同了。在 Redux 中，整个运用的 state 都被存储到一个object 中。当然，这也是仅有存储运用状况的当地。咱们能够了解为便是一个 Object tree。不同的枝干对应不同的 Componu h h t % S 6ent。可是归根结底只需一个根。

也是获益于单一的 state tree。以前难以完成的“吊销/重做”甚至回放。都变得轻松了许多。

State 只读

仅有改动 state 的办法便是 dispatch 一个 action。action 便是一个令牌罢了。normk H n { kal Object。

任何 state 的U a w D 2 Y 5变更，都能够了解为非 View 层引起的（网络请求、用户点击等）。Vi3 | s 7 E /ew 层只是发出了某一中意图。而怎样去满意，彻底取决于 Redux 自身，也便是 reducer。

store.dispatch({
type:'FETCH_START) U 4 | 4 X ',
params:{
itemId:233333
}
})

运用纯函数来修正

所谓纯函数，便是你得纯，别变来变去了。书面词汇这儿就不做过多解说了。而这儿咱们说的纯函数来修正，其实^ X . z f便是咱们上面说的 reducer。

Reducer 便是纯函数，它承受当时的 state 和 action。然后回来一个新的 state。所以这儿，state 不会更新，只会替换。

之所以要纯函数，便是成果可猜测性。只需传入的 state 和 action 一直，那么就能够了解为回来( + | O的新 state 也总是一样的。

总结

Redux 的东西远不止上面说的那么些。其实还有比方 middleware、U Q c J . $actionCreator 等等等。其实都是运用过程中/ % %的衍生品罢了。咱们主要是了解其思维。然后再去源码中学习怎样运用。

源码剖析

Redux 源码自身非常简略， a g r g h限于篇幅，咱们下一篇再去介绍compose、combine( N ; ) ] pReducers、applyMiddleware

Re) C : Z %dux 源码自身便是很简略，代码量也不大。学习它，也主, x A M _ ?要是为了学习他的编程思维和规划范式。

当然，咱们也能够从 Redux 的代码里，看看大佬是y ~ Z ` G F怎样运用 ts 的。所以源码剖析里边，咱们还回去花费不少精力看下 Redux 的类型说明。所以咱们从 type 开始看

src/types

看类型声明也是为了学习Redux 的 ts 类型声明写法。所以相似声明的写法形式咱们就不重复介绍了。m L Q

actt C 2 S ! ions.ts

类型声明也没有太多的需求去说的逻辑，所以我就写注释上吧

//Action的接口界说。type字段清晰声明
exportinterfaceAction<T=any>{
type:T
}
exportinterfaceAnyActionextendsAction{
//在Action的这个接口上额外扩展的别的一些任意字段（咱们一般写的都是AnyAction类型，用一个“基类”去束缚有必要带有type字段）l | f ^ 2
[extraProps:string]:any
}
exportinterfaceAcB 8 1 z r _tionCreator<A>{
//函数接口，泛型束缚函数的回来都是A
(...args:any[]):A
}
exportinterfaceActionCreatorsMapObject<] | k ? V 0 DA=any>{
//目标，目标值为ActionCreator
[key:string]:ActionCreator<A>
}

reducers.ts

//界说的一个函数，承受S和承继Action默许为AnyA* / d Xction的A,回来S
exporttypeReducer<S=aE p B Dny,AextendsAction=AnyAction>=(
state:S|undefined,
action:A
)=>S

//能够了解为S的key作为ReducersMapObjectn D * q 1 F l 4 U的key，然后value是Reducer的函数。ip z { X } C R { nn咱们能够了解为遍历
exporttypeReducersMapObject<S=any,Aexte{ j P c E qndsAction=Action>={
[Kinkeyor j l D Z TfS]:Reducer<S[K],A>
}

上面两个声X # 5明比较简略直接。下面两个略微费事一些

exporttypeStateFromReducersMapObject<M>=MextendsReducersMapObject&l^ ! 7 st;
any,
any
>
?{[PinkeyofM]:M[P]extend{ p { U I  # 1sReducer<inferS,any>?S:never}
:never

exporttypeReducerFromReducersMapObject<M>=Mextends{
[Pin_ C ` PkeyofM]:inf# . m N 1 b  }erR
}
?RextendsReducer<an? 9 P gy,any&u * 3 Sgt;
?R
:never
:never

上面两个声明，V i { Z D T R咱们来[ l E 8 – N | 0 D解说其中第一个吧（略S R h e j +微费事些）。

• StateFromReducersMapObject 添加另一个泛型M束: F p T K缚
• M 假如承继 ReducersMapObject<any,any>则走{ [P in keyof M]: M[P] extends Reducer<infer S, any> ? S : never }的# W P逻辑
• 不然便是 never。啥也不是
• { [P in keyof M]: M[P] extends Reducer<infer S, any> ? S : never } 很明显，这便是一个目标，key 来自 M 目标里边] U x i e O ,，也便是ReducersMapObject里边传入的S。key 对应的 valu{ - ze 便是需求判别 Mc = j & F[P]是否承继自 Reducer。不然也啥也不是
• infer 关键字和 extends 一直配合运用。这儿便是指回来 Reducer 的这个 State 的类型

其他

types 目录里边其他的比方 store、middleware都是如上的这种声明方式，H 7 $ y _就不再赘述了，感兴趣的能够翻S p L ! a阅翻阅。然后取其精华的运用到自己的 ts 项目里边

src/createStore.ts

能够看到，整个createStore.ts 便是一个createStore 函数。

createStore

三个参数：

• reducer：便是 reducer，依据 action 和 currentSt} y n 7 A p * jate 核算 newState 的纯 Function
• preloadedState：initial State
• enhancer：增强store的功能，让它具有第三方的功能

createStore 里边便是一些闭包m L M ` L ? i * s函数的功能整合。

INIT

//Aexte` j Q 7 n 5 n AndsAction
dispatch({type:Action` k | ETypes.INIT}asA)

这个办法是Redux保留用的，用来初始化Sta+ * 9te，其实便是dispatch 走到咱们默许的 switch case^ E | h s e 7 ] [ default 的分支里边获取到默许的 State。

return

conststore=({
dispatch:dispatchasDispatc W w } @ & Fh<A>,
subscribe,
getState,
replaceReducer,
[$$ob2 2 p servable]:observable
}asunknown)asStore<ExtendState<S,StateExt>,A,StateExt,Ext>&Ext

ts 的类型转换语法就不说了，回来的目标里边包含dispatch、subscribe、getState、replaceRedy ~ E J i cucer、[$$observable].

这儿咱们简略介绍下前三个办法的完成。

getState

functiongetState():S{
if(isDispatch* ~ h u m Xing1 A : B 6){
thrownewError(
`我reducer正在履行，newState正在产出呢！现在不可`
)
}

returncurrentStateasS
}

办法很简略，便是 return currentState

subscC – K ` $ Mribe

subscribe的作用便是添加监听函数listL r m ! g s : I 5ener,让其在每次dispaC h # z Ztch action的时候调用。

回来一个移除这个监听的函数。

运用如下：

constunsubscribe=store.subscribe(()=>
console.log(store.getState())
)

unsubscribe();

functionsub* 2 3scribe(listener:()=>void){
//假如listenter不是一个function，我就报错（其实ts静态查看能查V m l ^  ;看出来的，但！那是编译时Q i L d | %，这是运行时）
if(typeoflistener!=='function'){x N . * _ D = J M
thrownewError('ExpeP 6 3 :ctedthelistenertQ f B @obeafunction.K | = e. 1 z')
}
//同getState一个样纸
if(isDispatching){
thro{ _ jwnewError8 h W(
'YoH j $ wumaynotcalle 6 s R N / ( |store.subscribe()whilethereducerisexecuting.'+
'IfyouwouldliketY 1 y i o x l H mobenotifiedafterthestorehasbeenupdated,subscr( v + l } U 9ibefroma'+C Z & B
'componentandinvokestore.getState()inthecallbacktu f u d s # 7 _ 2oaccessthelateststate.'+
'Seehttps://`Redux`.js.org/api/store#subscr a h k m f O _ 2ibelisteng [ | ] + : yerformor7 9 t N g ~edetails.'
)
}

letisSubh & } 5 y E - Iscribed=true

ensureCanMutateNextLij 2 k 9 j C @stenee _ i Q 6 x g d 5rs()
//直接将监听的函数放进nextListeners里
nextListeners.push(listener, 8 : D)

returnfunctionunsubscribe8 e / A ; 7 5(){//也是使用闭包，查看是否以订阅，然后移除订阅
if(!isSubscribed){
return
}

if(isDispatching){
thrownewError(
'Youmaynotunsubscribefromastorelistenerwhil@ V K ? n U dethereducerisexecuting.'+
'Seehttps://`Redux`.js.org/api/store#subscribelistenerformoredetails.'
)
}

isSubscribed=false//修正这个订阅状况

ensureCanMutateNextListeners()
//找o 0 j E . ? o p .到位置，移除监听
constindex=nextListeners.indef = 3 C / u | 1 5xOf(listener)
nextListeners.splice(index,1)
currentLf | X / X M 1 Kisteners=null
}
}

一句话解说便是在 listeners 数据里边添加一个函数

再来说说这儿边的ensureCanMutateNextListeners,许多 Redux 源码都么有怎样提及这个办法的作用。也是让我有点困惑。

这个办法的完成非常简略。便是判别当时的I 9 { } 3 v ? r *监听数组里边7 ~ , _ J M是否和下一个数组相等。假如是！则 copy 一份。

letcp @ . 7urrentListeners:(()=>void)[]|null=[]
letneP o v xxtListeners=currentListeners

functionensureCanMutateNextListeners(){
if(nextListeners==R E L 8 o ? A ?=currentListeners){
nextListeners=currentListeners.slice()
}
}

那么6 t 4 @ F ~ o为什: 8 ) h +么呢？这儿留个彩蛋。等看完 dispatch 再来w . J /看W | , L U #这个疑问。

dispatch

functiondispatch(action:A){
//action有必要是个@ N W ` b一般目标
if(!isPlainObject(action)){
thrownewError(
K z N q ; , 2 'Actionsmustbeplainobjects.'+
'Usecustommiddlewareforasyncactions.'
)
}
//有必要包含type字段
if(typeofaction.type==='undefined'){
thrownewError(
'I w 3 1 f  ?Action6 ] S 1 N dsmaynothaveanundefined"type"property.'+
'Haveyoumisspelledaconstano = W 3 z X e jt?'
)
}
//同上
if(isDispatching){
thrownewError('Reducersmaynotdispatt ; A   FchO @ } I E zactions.')
}

try{
//设置正在di? 7 $ g ? Z tspatch的tag为true（解说了那些判别都是( b * g从哪里来的了）
isDis0 S a 5patching=true
//经过传入的reducer往来不断的新的sF D b + X o }tate
//letcurrentReducer=reducer
currentState=currentReducer(currentState,action)
}finally{
//修正状况
isDispatching=false
}

//将nextListener赋值给currentJ F K F ) G % FListeners、listeners(留意回顾ensureCanMutateNextListeners)
constlisteners=(currentListeners=nextListeners)
//挨个触发监听
for(leti=0;i<listeners.length;i++){
constlistener=lisz : & = R 5 /teners[i]
listener()
}

returnactioP H  ; B N Ln
}

办法很简略，都写在注释里了。这儿咱们再回过头来看ensureCanMutateNextListeners的意义

ez 0 fnsureCanMutateNext 6 V d j UListeners

letcurrentListeners:(()=>void)[]|null=[]
letnF ! H w _ X h c BextListeners=currentListeners

func= $ _ y dtionensureCanMut} ~ h 7 E s Z aateNextListenersE W m | S L K r(){
if(nextListeners===currentListeners){
nextListeners=cs { F @urrentListeners.slice()
}
}

functionsubscribe(listener:()=>6 2 t 0 - f k y dvoid){
//...
ensureCanMutateNextListeners()
nextListenel L # `rs.push(listener)

returnF ] ; t / = ~functionunsubsX g Lcribe(){
ensurc T @ r + A , ; ^eCanMutateNextLisl : [ Y c kteners()
constindex=nextListeners.indexOf(listener)
nextListenb [ Qers.splice* C f = k 6 J ~(index,1)
currentListeners=null
}
}

functiondispatch(ac4 + { ftion:3 ! #A){
//...
constlistenerU q l / N x d Es=(currentListeners=nexth J e O  9 j c WListe, ] 1 ( m F ^ners)
for(leti=0;i<listeners.length;i++){
constlistener=listeners[i]
listener()
}
//...
returnaction
}

从上，代码R t 4 U看起来貌似只需一个数组来存储listener 就能够了。可是事实是，咱们恰恰便是咱们的 listener 是能够被 unSubscribe 的。而[ G g R – i w H W且 slice 会改a # C w %动原数组巨细。

所以这儿增加了一个 listener 的副本，是为了避免在遍历listeners的过程中g l W 8因为subscribe或许unsubscribe对listeners进行的p s 5 . . D : X修正而引起的某个listener被漏掉了。

最终

限于篇幅，就暂时写到这吧~

其实后边计划要点介绍的 Middleware，只是中间件的一种更标准，甚至咱们能够了解为，它并不属于 Redux 的。因为到这儿，你现已彻底能W e m z R够自己写一份状况办理计划了。

而 combineReducers也是我认为是费奇妙的规划。所以F I N这些篇幅，就放a l ) i V 到下一篇吧~

参阅链接

• redux
• 10行代码看尽Redux完成
• Redux 中文文档

学习交流

• 关注大众号【全栈前端精选】,每日获取好文推荐
• 添加微信号：is_Nealyang（补白来源– m , f 7） ,入群交流

大众号【全栈前端精选】	个人微信【is_Nealyangr x Z c % W J ] S】