Redux原理及應(yīng)用三大原則是什么

本篇內(nèi)容介紹了“Redux原理及應(yīng)用三大原則是什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Redux工作原理

Redux通過store來管理全局的狀態(tài);

視圖產(chǎn)生操作后會生成一個(gè)action,通過dispatch(action)這個(gè)方法派發(fā)給store;

store會將當(dāng)前的狀態(tài)和此次的action交給reducer處理，reducer處理后需要返回新的狀態(tài)，此時(shí)store就能得知數(shù)據(jù)的變化，然后回通知視圖獲取最新的數(shù)據(jù)

基本概念和api

Store

Store 就是用來維持應(yīng)用所有的 state 樹 的一個(gè)對象。

改變 store 內(nèi) state 的惟一途徑是對它 dispatch 一個(gè) action。

整個(gè)應(yīng)用只能有一個(gè) Store。

store方法

提供 getState() 方法獲取 state； 提供 dispatch(action) 方法更新 state； 通過 subscribe(listener) 注冊監(jiān)聽器; 通過 subscribe(listener) 返回的函數(shù)注銷監(jiān)聽器。

Reducer

reducer其實(shí)就是一個(gè)純函數(shù)。

它接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是需要管理的狀態(tài)state，第二個(gè)是action。

reducer會根據(jù)傳入的action的type值對state進(jìn)行不同的操作，然后返回一個(gè)新的state，而不是在原有state的基礎(chǔ)上進(jìn)行修改,但是如果遇到了未知的(不匹配的)action，就會返回原有的state，不進(jìn)行任何改變。

const reducer =(state,action)=>{   switch(action.type){     case ADD_TODO:         return newstate;     default return state   } }

Action

action本質(zhì)是一個(gè)對象;

它是 store 數(shù)據(jù)的唯一來源。它會運(yùn)送數(shù)據(jù)到 Store。

const action={   type:'ADD_TODO',   payload:'redux原理' }

應(yīng)用時(shí)的三大原則

在我們使用redux時(shí),需要遵守這三大原則,則可以避免90%的bug:

• 單一的數(shù)據(jù)源

我們把Store看成一個(gè)全局對象,而這個(gè)對象是唯一的,所有的狀態(tài)都在Store這個(gè)狀態(tài)樹中'統(tǒng)一配置'

• State是只讀的

想要改變State必須通過Action,而具體使action在state上更新生效的是reducer;

這樣確保了 視圖 和 網(wǎng)絡(luò)請求 都不能直接修改 state，相反它們只能表達(dá)想要修改的意圖。

• Reducer必須是一個(gè)純函數(shù)

Reducer內(nèi)部的執(zhí)行操作必須是無副作用的，不能對state進(jìn)行直接修改，當(dāng)狀態(tài)發(fā)生變化時(shí)，需要返回一個(gè)全新的對象代表新的state。

這樣確保了同樣的State，必定得到同樣的 View。

需要遵守的是:

不得改寫參數(shù) 不能調(diào)用系統(tǒng) I/O 的API 不能調(diào)用Date.now()或者M(jìn)ath.random()等不純的方法，因?yàn)槊看螘玫讲灰粯拥慕Y(jié)果

“Redux原理及應(yīng)用三大原則是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！