如何通俗易懂的理解 redux

2021-09-14 04:53:59 字數 1456 閱讀 6182

首先先了解下什麼是mvc框架

mvc框架(model-view-controller)

來個小故事幫助理解
故事的主人公小明,辛苦打拼多年,終於存到了買房的錢,於是就屁顛屁顛的在首都的郊區買了一套120的毛坯房(當前的房子的state),因為是毛坯房,自然是出了一些基礎設施其他啥也沒有(initstate),這問題就來了,這毛坯房也不能住啊 ,這剛買完房也沒多少積蓄了,就想著找裝修公司簡裝下,問了**之後,小明直接就憑著當年在幼兒園打下的美術基礎畫了一張設計圖,然後就和自己老婆分配了任務,誰該做什麼,例如小明粉刷牆,經過多天努力,總算是裝修完成了,此時小明的新房,從乙個毛坯房,變成了乙個豪華的毛坯房(更新之後的房子的state

1.首先回顧下這個故事: 小名的毛坯房 --> 畫出裝修圖紙 --> 小明分配任務 --> 小明和自己老婆裝修 --> 豪華毛坯房

2.再來說下redux裡的幾個核心概念,這裡我們把react也加進來:

3.接下來看看redux/react與這個故事的聯絡:

4.所以這個過程應該是這樣的

view ---> action ---> reducer ---> store(state) ---> view

redux 原始碼簡單分析

redux中主要方法:

這裡主要分析一下createstore(reducer)
原函式有三個引數,這裡只分析第乙個引數reducer

引數:reducer

因為reducer合併狀態是覆蓋式,所以需要先解構出當前狀態,再進行處理

store的返回值:返回值是三個方法

getstate: 獲取倉庫中當前狀態

subscribe: 註冊監聽函式,監聽state的變化

store 可以理解為乙個全域性變數,儲存著你專案中所有需要儲存的資料,而這個全域性變數加了一把密碼鎖,只有指定的密碼(dispatch())進行修改,因為你想啊,若是誰都能修改這個全域性變數,而在你用這個變數之前,可能執行的其他程式已經對這個變數進行了修改,這也是我們平時開發的時候避免全域性變數的原因,所以就要提高修該資料的許可權。

let createstore = (reducer)=>

let subscribe = (listener)=>

dispatch({})

// 由於每次dispatch執行後,redux都會執行reducer

//所以這一行的作用就是在初始化store tree中所有的state節點。

return

}

通俗易懂 理解「委託」

委託的意義在於實現多型 在於讓物件能夠在程式執行時滿足外界對其的改變。1 乙個物件屬性 動作,如果在編譯時就能確定,可以在這個物件的類裡面來實現。2 乙個物件的屬性 動作,如果在執行時才能確定,則只能通過這個物件的委託來實現。換句話說 類,滿足編譯時對物件的設定和要求。委託,用於滿足執行時對物件的設...

通俗易懂的理解MVC模式

mvc由view檢視,controller控制器,model模型三部分組成。當使用者與view進行互動的時候,會觸發view的一些事件,這些事件會被controller模組監聽到,controller會根據不同的使用者事件去呼叫model層的一些介面,通過這些介面修改model層的資料。在之前vie...

通俗易懂的來理解Iaas,Paas,SaaS

首先我們先來了解一下這幾個單詞的意思和完全的英文 iaas infrastructure as a service 基礎設施即服務 paas platform as a service 平台即服務 saas sofware as a service 軟體基服務 怎麼說,看這幾個上面的單詞是不是看的一...