上面配圖是一個我自己整理的redux里面的todoMVC demo示意圖浑厚,串聯(lián)著看的話能大概看懂項目的結(jié)構(gòu)蛤肌。github項目鏈接地址如下:
https://github.com/reactjs/redux/tree/master/examples/todomvc
對于redux,知乎上有一些前輩回答的十分精煉簡潔,我覺得每次看一遍都會有新的理解仙畦。貼出如下《理解 React,但不理解 Redux音婶,該如何通俗易懂的理解 Redux慨畸?》:
https://www.zhihu.com/question/41312576/answer/90782136
Action:
addTodo、deleteTodo分別為新增衣式、刪除待辦事項的方法寸士。新增需要知道文本內(nèi)容text,刪除需要知道對應id碴卧。由圖可知方法返回的數(shù)據(jù)結(jié)構(gòu)必有type弱卡,用于匹配reducer中的實現(xiàn)方法,其余參數(shù)為reducer中操作state的所需參數(shù)
綜述:action只聲明數(shù)據(jù)結(jié)構(gòu)住册,types和必要參數(shù)
Reducer:
reducer用來匹配action的type婶博,該方法會返回一個舊的state和action,action用于匹配邏輯代碼
綜述:reducer接受一個舊的state界弧,并且返回一個新的state
Store:
圖中用了creatStore新建store并且加入了熱替換凡蜻,編碼比較固定」富可知划栓,reducer被注入store,store中存儲了總狀態(tài)条获,發(fā)布action(這句話如果理解的牽強就先記字臆瘛)
綜述:store中存儲了所有的state
App:
圖中標注了幾處,這里通過connect把action和action(reducer)放在了一起。圖中state的值為reducer中返回的對象(reducer就是操作舊的state委煤,返回新的state)堂油,這里我們還需要把有必要的值篩選出來,傳入到App中作為App的props碧绞。action也被傳入到了props中府框,所以在App的render()函數(shù)中,代碼獲取了todos和actions讥邻,用以往下分發(fā)給子組件迫靖。
Provider:
這里在Provider中加入了store,其子組件為App兴使,上面論述過store中有reducer系宜。用戶在view中調(diào)用【方法】可以發(fā)出action,然后通知store发魄,store中的reducer根絕action改變state盹牧,state改變dom改變,最后完成渲染励幼。