【翻譯】Redux 教程

原文地址:Leveling Up with React: Redux

Redux 是一個用于 JavaScript 應用,管理數據流(data-state)和 UI 狀態(UI-state)的工具。它對于單頁面應用來說是非常理想的,尤其是隨著時間推移,state 會變得越來越復雜。同樣它也是不依賴于框架的(framework-agnostic),因此雖然 Redux 是用 React 寫的,但是它也可以用于 Angular 或 jQuery 應用。

另外,它來自一個“時間之旅”的實驗,事實上,我們稍后將了解它。

正如我們之前的教程 React "flows" data through components ,具體來說,這叫“單向數據流”,數據流向一個方向——從父到子。因為這個特征,兩個非父子關系的組件是如何通信卻不是很清楚。

React 并沒有介紹組件與組件的直接通信的方法。甚至它沒有知識這個特性的方法,通過很多人實驗這是欠考慮的,因為組件與組件的直接通信是錯誤的并且或導致意大利面條式代碼——一個關于代碼很難去跟蹤的古老的術語。

React 對此確實提供了方法,但是他們希望你自己通過工具去實現它,這里是 React docs 的片段:

對于兩個組件之間的通信,你可以建立自己的全局事件系統,... Flux 模式是實現它的一種可行的辦法。

這時,Redux 就及時出現了。Redux 提供了一個解決辦法:把所有的應用狀態存放在一個地方,叫做 “store” ,組件通過發起(dispatch)變更的 state 到 “store”,而不是直接將變更的 state 傳遞給組件。組件需要知道 state 的改變,可以從“store”中訂閱(subscribe)。


這個 store 可以被理解為在應用中變化的 state 的“中間人”。引入 Redux,組件之間不需要直接通信,所有的狀態變化都必須經過“真理的唯一來源”——store。

這與其他的策略——組件與組件直接通信不同,這種策略由于令人疑惑的原因導致錯誤。


有了 Redux, 就明白了:所有組件都從 store 獲得他們的 state ,同時組件之間改變他們的 state 也是通過 store。要改變組件,需要通過向 store 發起,不需要擔心其他組件是否需要改變 state。這就是 Redux 使數據流(data-flow)變得簡單的原因。

如果有需要可以了解Flux pattern

ps:第一次翻譯技術類文章,想通過自己邊學邊譯提高自己的水平,同時如果剛好也能幫助到你,那這篇文章也就是沒白翻。歡迎交流指正。

未完待續:

Redux 與 “Flux” 相像

我們的第一個 Reudx Store

多個Reducers

Action

不可變的數據結構

初始化 State 和時間之旅

Redux 和 React

用 React-redux 連接

React Router

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容