剛進公司的時候,一點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的例子了!