Redux 入門

Redux是一個(gè)數(shù)據(jù)框架,下圖為redux的工作流。

Redux工作流

1. 工作流的解釋

組件通過store.dispatch()方法發(fā)送action對(duì)象給store,store自動(dòng)將prevState和action發(fā)送給reducers,reducers
將newState返回給store,由此store中存放的state得到了更新,再由組件的subscribe()方法監(jiān)聽到store的變化,重新調(diào)用
store.getState()方法,組件中的state也就隨之更新。

Action對(duì)象的編寫:

  1. action.type可以拆分在一個(gè)獨(dú)立的js文件中,以常量的形式定義然后在組件中引用,這樣可以防止字符串編寫錯(cuò)誤;
  2. 用actionCreators來統(tǒng)一創(chuàng)建并返回創(chuàng)建的action對(duì)象。

2. 設(shè)計(jì)和使用三原則

1. store是唯一的!
整個(gè)應(yīng)用中(包含多個(gè)組件),只有一個(gè)store作為公共存儲(chǔ)空間。
2. 只有store能改變自己的內(nèi)容!
它在接收到reducer的新數(shù)據(jù)后更新store中的數(shù)據(jù)。
3. reducer必須是純函數(shù)!
純函數(shù):給定固定的輸入,就一定會(huì)有固定的輸出,而且不會(huì)有任何副作用。
(不純的,比如有異步操作(Ajax)、Date對(duì)象相關(guān)的操作)
沒有副作用:不對(duì)傳入的參數(shù)進(jìn)行任何修改。

export default (state = defaultState, action) => { 

為什么要給state設(shè)置defaultState默認(rèn)值?
因?yàn)樵趯?duì)store中的state做第一次修改時(shí)(即第一次傳入action),state并不存在,因此默認(rèn)給state賦值為defaultState,讓action在> >defaultState的基礎(chǔ)上修改數(shù)據(jù)。

3. 牢記4個(gè)方法:

  • createStore()
  • store.dispatch()
  • store.getState()
  • store.subscribe() (訂閱store的變化)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Redux 教程 Redux 是 JavaScript 狀態(tài)容器,提供可預(yù)測(cè)化的狀態(tài)管理。 (如果你需要一個(gè) Wo...
    IT老馬閱讀 3,476評(píng)論 1 23
  • Redux入門學(xué)習(xí)系列教程(一)Redux入門學(xué)習(xí)系列教程(二)Redux入門學(xué)習(xí)系列教程(三)Redux入門學(xué)習(xí)...
    光強(qiáng)_上海閱讀 10,465評(píng)論 1 36
  • 一、基本概念 1.Store Store 就是保存數(shù)據(jù)的地方,你可以把它看成一個(gè)容器。整個(gè)應(yīng)用只能有一個(gè) Stor...
    南慕瑤閱讀 790評(píng)論 0 1
  • tips: 當(dāng)前文章并非原創(chuàng),詳情請(qǐng)關(guān)注 阮一峰老師的個(gè)人網(wǎng)站 下一篇 Redux 入門教程(二): 中間件與異步...
    sudhengshi閱讀 1,891評(píng)論 0 3
  • 系列文章:Redux 入門(本文)Redux 進(jìn)階番外篇: Vuex — The core of Vue appl...
    6ed7563919d4閱讀 5,389評(píng)論 4 44

友情鏈接更多精彩內(nèi)容