這次強推線上reactjs讀書會

allen 大大的redux 入門

https://www.youtube.com/watch?v=upq6WEAAE3Y

rick 大大的 reactnatice 起手式後半端的 redux 入門
https://www.youtube.com/watch?v=RLUqAgbSrPA

國昭大大的 reactjs + redux
https://www.youtube.com/watch?v=U4K4ds7ncFI

三位大大在線上讀書會主講 非常精彩

以下是polo 個人的學習心得經驗分享

1.首先 要先了解到 reactjs 本身會有個 component ,這個component 在 constructor建構的時候 就會有一個 this.state 可以使用
(reactjs中當 this.state 有變化的時候就會去比對虛擬的dom 然後再去重新 render)

2.this.state 分散在各個 component 當系統越來越大,就會變得不好管理與除錯,所以 redux 的概念就是把 各個 this.state 統一管理放到最上層

3.那一般在建置時候目錄結構會這樣做,並且要理解的當中的用法

大約資料夾結構
...
action     <--  要學會分派action如何設定 (可以想說要畫面view去call action 執行 reducer)
compenent  <--  這邊要學習要 stateless 與 extends react.compenent
container  <--  這邊要學習到 connect  high order command
reducer     <--  學習到 function programing 的使用方法,還有combineReducers組合全部的reduce
...

以下解釋上方四個資料庫結構

那這邊先從container的connect說起 基本上這個指令的用法就是叫做 high order command(可以想做是本身的元件在掛載擴充其他功能)這邊的話通常會看到的就是,再把dispatch 與 state 抓進來這個container 使這個container具有這兩個功能

接下來會介紹 compenent 一般都會用 stateless 的做法,因為componets所有的dispatch與state都是是由上層container 傳入所以基本上所有會用到的參數或function都交付給container 在使用props傳遞,但是還是有許多時候需要提升為 extends react.compenent
常見的狀況 是有需要一些 compenent state 狀況會使用(小專案可以使用componets 裡的state)

action的部分基本就是觸發這個action後會發一個redcuce讓 state改變 再去render畫面,action就是定義好的方法所以也像function一樣,等待在樣板中呼叫

reducer 實際會使用function programing (這個比較複雜細節可以參考allen大大的主講) 那每一個reduce基本都會傳入原本的state,與action(含參數) 使用function programing 中再去改變原來的state 再回傳新的state這個動作就叫做 reducer

那因為每個reducer就會管理到所有的state了所以我們通常會把他抓出來透過下面指令

const composedReducer = combineReducers(reducers);
然後再把所有的composedReducer 綁定到store中 這樣store就是等於有所有的state狀況嚕
const store = createStore(composedReducer);

那還有很多其他的 redux 延伸可以去探索有 redux-saga redux-thunk...還有些還沒攻略,期待有其他大大可以在來讀書會知識分享了