React框架(十一)Redux簡介與工作流程

2021-10-03 18:22:20 字數 647 閱讀 2310

react僅僅為檢視層框架,當父子元件很複雜的時候,傳值會變得極其困難,這時便需要乙個資料層框架來結合使用,才使得構建乙個大型專案成為可能。

基於redux,所有元件的資料都儲存到乙個公共區域store,每個元件只需改變store中的資料,當store資料發生變化,其它各個元件便會感知,從而進行通訊。

下面做乙個圖書館借閱圖書的比喻:

store(資料的公共存放區):圖書管理員

reducers(提供store元件需要的資料):藏書記錄

react components(元件):借閱者

action creators(元件獲取/改變資料的動作):借閱請求

借閱者提出借閱請求後,圖書管理員從藏書記錄中得到要借閱的書籍給借閱者。

檢視層react元件要獲取/改變資料時,action creators被建立,通過dispatch方法請求資料區store,資料區通過reducers獲取最新的state傳遞給元件。

(大致流程,比較粗陋)

react學習筆記 redux的極簡理解

最近在學習react。react本身的寫法挺簡單的,挺塊就學會了。react router之前學習過,當時學得有點迷糊,覺得學得差不多了。現在再看文件,發現文件非常好懂,上一次看其實沒看懂。接著我就開始看redux了。看的是redux的中文文件 通篇看下來,有幾個理解 1 action,實際上是描述...

react簡書專案學習筆記21redux使用的原則

1.store是唯一的 2.只用store可以該變state裡的內容 reducer不能直接更新state,只是返回乙個新的state給store,讓store去改變 3.reducer必須是乙個純函式 純函式 給定固定的輸入就一定有固定的輸出,而且不會有 當函式中有非同步操作或和日期相關的操作的時...

React學習記錄 Redux

入門 官網react.js 小書 父向子孫傳值用props import from redux export default function 第二步 根據計算規則生成 store let store createstore counter 第三步 定義資料 即 state 變化之後的派發規則 根據...