談談對redux的認識

2022-07-31 07:57:14 字數 1553 閱讀 2901

redux是從flux演變而來,但又獨立於react。簡言之就是,redux是一種單純的狀態管理器。可以和react搭配,也可以和其它框架搭配。

redux有三個重要的部分組成: store, action, reducer

其中store是乙個物件,action是乙個物件,reducer是乙個純函式。

store物件,用於包裹action和reducer兩個部分。簡言之store就是乙個中間橋梁,用於連線action和reducer。

action物件可以看做是一組指令的集合。比如新增一條使用者資訊。action必須要用乙個type屬性,也就是該條指令的名字。其餘屬性可以按需新增。

reducer是乙個純函式(純函式概念大家可以去google,這裡就不講了),有兩個引數,乙個是state(當前的狀態值),乙個是action(操作指令)。

通過這兩個引數,按照指定規則計算出乙個新狀態值,並返回新狀態值。由於一般我們會把state定義為物件形式,所以這裡最好返回也是乙個物件。

在使用store之前,需要先建立乙個store.

redux提供乙個createstore元件用於建立store。

在建立store時需要傳入reducer函式。

let action = ;

let reducer = function(state = , action) //

返回計算後的新狀態

default

:return

state;

}}let store = createstore(reducer)

這樣乙個store就建立好了。

但是這樣,沒有任何用。我們說指令需要使用者去傳送的,不然reducer不會返回新狀態。所以,我們就要手動去傳送指令。

比如我們通過點選去傳送:

function

senduserid(action)

傳送

store通過dispatch方法去派送指令,一旦dispatch執行,reducer函式會自動執行。

到此為止,乙個完整的store過程就算完成了。

但是,如果我們這個時候要用新狀態怎麼辦?我們知道react是通過改變state方式來重新渲染ui的。

這個時候我們已經有了新的state了,現在就是要把新state取到,然後呼叫setstate,就可以更新ui了。

好,知道這個邏輯後,就好辦了。

store提供乙個getstate方法來獲取新的state。不過getstate不能直接去獲取,需要用監聽的方式來獲取。store也提供了相應的監聽方法。

store.subscribe(function

())

到此為止,一整套狀態轉換就全部完成了。這時有人可能就說,redux看起來很蹩腳啊,還不如用this.props來的快。

對,你說的沒錯,目前為止只是單講redux,並沒有和react結合。

下一節我們再一起學習react-redux這個外掛程式。這個是完全為react量身定製的。

談談對MVC的認識

核心思想是 檢視和使用者互動通過事件導致控制器改變 控制器改變導致模型改變 或者控制器同時改變兩者 模型改變 導致檢視改變 或者檢視改變 潛在的從模型裡面獲得引數 來改變自己。他的好處是可以將介面和業務邏輯分離。model 模型 是程式的主體部分,主要包含業務資料和業務邏輯。在模型層,還會涉及到使用...

談談對mvc 的認識?

由模型 model 檢視 view 控制器 controller 完成的應用程式 由模型發出要實現的功能到控制器,控制器接收組 織功能傳遞給檢視 mvc 是乙個設計模式,它強制性的使應用程式的輸入 處理和輸出分開。使用mvc 應用程式被分成三個核心部 件 模型 檢視 控制器。它們各自處理自己的任務。...

談談我對CMMI的認識

cmmi是一種非常好的軟體工程方法,已經總結和建立了很多優秀的流程方法,而且諮詢公司會提供模板資料,把這些別人的東西般過來學習和實施,就可以在自己的企業運作得非常好 在我看來,這些理解完全是錯誤的。這種錯誤理解或觀念,使得很多企業實施cmmi後卻完全看看不到效果,甚至事倍功半,開發效率和質量還比不上...