react+redux官方實例TODO從最簡單的入門(1)-- 前言


  剛進公司的時候,一點react不會,有一個需求要改,重構頁面!!!完全懵逼,一點不知道怎么辦!然后就去官方文檔,花了一周時間,就純react實現了頁面重構,總體來說,react還是比較簡單的,由於當初時間比較短,沒時間去結合redux了,所以也算交差了,后面看公司寫的react+redux實現的,簡直一臉懵逼,完全不懂啊,公司主要用angular和jQuery!所以這個任務完成后,就沒管過react+redux了,最近再去看,看到redux時,完全懵逼了,什么store,reducer,action,完全不懂怎么回事啊,按照官方的照着抄一遍,有時候能出來效果,有時候就報錯,但完全不知道怎么改,哎!連續很長時間卡在了這里,主要時間也零碎,剛有點思路,又有任務來了,所以這里卡了很長時間!就在最近,終於開竅了,就以一個真正的無法理解redux到初步掌握了redux思想的小白記錄一下這個艱辛的路程!

  正式開始!!!

  首先明白一個道理,可能網上也把這個道理說了N遍了,但我還是以我自己理解的來梳理一下!

  store:真的就是數據分發的地方,store→view,他就這么一個作用,把數據給view,展示頁面。主要有一下功能(摘錄自網上的語錄,我覺得說的最清楚的了)

    1:維護整個應用的state;

    2:提供getState()方法獲取state;后面有了插件,也不需要這些具體的方法了

    3:提供dispatch(action) 方法更新 state;

    4:通過 subscribe(listener) 注冊監聽器。

    

    (打開控制器,store就這幾個東西,很清晰)

  action:提供一些狀態函數,store數據的來源就是action,需要至少一個type,type是這個指令的唯一標識,其他元素是傳送這個指令的state值,這個指令有組件觸發,然后傳到給reducer!如圖,type聲明狀態,后面的參數,就是傳過去的state值。當reducer需要的這個action的時候,也會把后面的參數帶上。

  

  reducer:如果action申明了要做什么,那么具體區改變(更新)state,就是reducer做的事情了,這樣理解吧,action約定了一個type,然后reducer遇到這個type,就去做一件事!

  

  其實就這么一個關系

  

 

  現在redux的三大金剛到位了,后面就是結合react的實現官網的TodoList的例子了!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM