摘要:它搭配解決了組件之間通信問題,這個通信問題,是組件和其它組件之間也可以跨層通信,不需要一層一層的把,父組件的數(shù)據(jù)往下傳遞。庫解決了什么問題解決了跨層組件通信問題。
忽略此文,不敢浪費你的時間 Redux是什么?
Redux是Facebook提出一個數(shù)據(jù)狀態(tài)管理的庫,也可以說框架。它搭配React解決了組件之間通信問題,這個通信問題,是組件和其它組件之間也可以跨層通信,不需要一層一層的把,父組件的數(shù)據(jù)往下傳遞。這會增加代碼復(fù)雜度和維護的復(fù)雜度。
如果使用React.createContext的API也可以實現(xiàn)跨層通信,你可以多帶帶寫一個模塊去封裝Context.Provider和Context.Consumer,只有在根組件使用Context.Provider后,需要共享Context上的數(shù)據(jù)的組件,都可以通過引入Context.Consumer組件去獲取公共的數(shù)據(jù)。哪個組件需要頂層組件的數(shù)據(jù),就必須引入Context.Consumer。
//context.js export default Context = createContext("")
//app.js let store = createStore(reducer)
import Context from "./context.js"store{(data) => ( {data.time})}
整個Application的數(shù)據(jù)保存地。這里有一切應(yīng)用所共享的數(shù)據(jù),后臺交互和用戶輸入的數(shù)據(jù)都在這里管理。Redux提供了一個方法,創(chuàng)造整個應(yīng)用數(shù)據(jù)的store,只需要使用es6模塊機制,import命名可以輸出我們需要的接口。
import { createStore } from "redux" //創(chuàng)建store必須,外部注入數(shù)據(jù)和改變整個state的邏輯 let store = createStore(reducer,initalPreLoadState)action
描述界面的交互和行為的對象,用戶要做什么事,必須發(fā)送一個action對象到store的dispatch函數(shù)里面,根據(jù)提供reducer去匹配action.type,如果沒有type匹配對了,會執(zhí)行接下里的邏輯,更新整個store里面該改變的數(shù)據(jù)。
store.dispatch的源代碼里,對傳入的action是否為對象做了判斷,是否有type屬性也做了判斷。如果action沒有問題,那么執(zhí)行定義傳入的reducer(state,action)函數(shù),
reducerreducer是一個純函數(shù),什么樣的輸入就得出什么樣的輸出,怎么理解呢? store.dispatch發(fā)送了action,當(dāng)然,這個store.dispatch早就放在了標(biāo)簽的事件里,等著用戶去觸發(fā)。action對象來到store.dispatch函數(shù)內(nèi)存,有了action的數(shù)據(jù),執(zhí)行reducer函數(shù),去匹配類型,執(zhí)行對應(yīng)的代碼。
function add(state=0,action) { switch(action.type){ case "add": return state + 1 case "decre": return state - 1 default: return state } }改變state的唯一方式
state和view一一對應(yīng),state改變了,view也就改變了。state如何改變,界面的標(biāo)簽上,給定的事件,store.dispatch函數(shù),該函數(shù)的參數(shù)是action對象,描述要做什么事,觸發(fā)此函數(shù),傳遞給整個應(yīng)用的store,會執(zhí)行store.dispatch函數(shù)里的reducer函數(shù),去更新state,store.subscribe函數(shù)監(jiān)聽store的數(shù)據(jù)發(fā)生變化,便會觸發(fā)此函數(shù)去更新React的根組件。
Redux沒有解決什么?redux庫提供了核心一個API,createStore函數(shù),可以把整個應(yīng)用的數(shù)據(jù)也就是存放在store里面,但是它真的只提供了數(shù)據(jù),對于組件之間的通信,redux庫是沒有解決的。store里面的數(shù)據(jù)還是得從頂層組件往下傳,一層一層傳。
如果要跨組件通信,頂層組件與任意組件通信,redux必須借助react的Context的API,結(jié)合Redux和React結(jié)合成一個庫,這樣提供的兩個API,就可以跨層通信。
React-Redux庫解決了什么問題解決了跨層組件通信問題。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104048.html
摘要:我現(xiàn)在寫的這些是為了解決和這兩個狀態(tài)管理庫之間的困惑。這甚至是危險的,因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數(shù)式編程是不斷上升的范式,但對于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應(yīng) 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...
摘要:應(yīng)用這說明并不是單指設(shè)計給用的,它是獨立的一個函數(shù)庫,可通用于各種應(yīng)用。在數(shù)據(jù)流的最后,要觸發(fā)最上層組件的,然后進行整體的重新渲染工作。單純在的對象上是沒有辦法使用,要靠額外的函數(shù)庫才能這樣作,這是一定要使用類似像這種函數(shù)庫的主要原因。 Redux的官網(wǎng)中用一句話來說明Redux是什么: Redux是針對JavaScript應(yīng)用的可預(yù)測狀態(tài)容器 這句話雖然簡短,其實是有幾個涵義的: ...
摘要:希望大家在這浮夸的前端圈里,保持冷靜,堅持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點,受到很多朋友的關(guān)注,都強烈要求再出多些React相前的面試題,受到大家的邀請,我又找了20多個React的使用者,他們給出了328道React的面試題,由我整理好發(fā)給大家,同時發(fā)布在了前端面試每日3+1的React專題,希望對大家有所幫助,同時大...
摘要:面試題來源于網(wǎng)絡(luò),看一下高級前端的面試題,可以知道自己和高級前端的差距。 面試題來源于網(wǎng)絡(luò),看一下高級前端的面試題,可以知道自己和高級前端的差距。有些面試題會重復(fù)。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進行通信 React聲明周期及自己的理解 如何...
閱讀 2032·2021-11-08 13:14
閱讀 2941·2021-10-18 13:34
閱讀 2029·2021-09-23 11:21
閱讀 3591·2019-08-30 15:54
閱讀 1760·2019-08-30 15:54
閱讀 2931·2019-08-29 15:33
閱讀 2581·2019-08-29 14:01
閱讀 1948·2019-08-29 13:52