# Redux 常見問題：綜合 ## 目錄 - [何時學習 Redux ？](#general-when-to-learn) - [何時使用 Redux ？](#general-when-to-use) - [Redux 只能搭配 React 使用？](#general-only-react) - [Redux 需要特殊的編譯工具支持嗎？](#general-build-tools) ## 綜合 <a id="general-when-to-learn"></a> ### 何時學習 Redux？ 對于 Javascript 開發者來說，學什么是一個很大的問題。因為每次在你學習一項技術或著手于工作中遇到的問題時，你所學的會幫助你縮小可選擇的范圍。Redux 是一個管理應用狀態的模式。如果你沒有遇到應用狀態管理方面的問題，你就很難理解 Redux 的益處何在。某些 UI 庫（例如 React）有著它們自己的狀態管理系統。如果你正在使用這樣的庫，特別是你剛剛開始學習這樣的庫，我們鼓勵你優先學著用原生的系統來解決問題，因為這對于構建你的應用來說已經足夠了。當你的應用已經達到相當的復雜程度，以至“狀態儲存到哪了”、“狀態怎么變化的”這樣的問題開始困擾你，這就是學習 Redux 的大好時機。感受一下 Redux 對復雜事物的抽象過程，將有助于你將這種抽象應用到工作中去。 <a id="general-when-to-use"></a> ### 何時使用 Redux？ React 早期貢獻者之一 Pete Hunt 說： > 你應當清楚何時需要 Flux。如果你不確定是否需要它，那么其實你并不需要它。 Redux 的創建者之一 Dan Abramov 也曾表達過類似的意思: > 我想修正一個觀點：當你在使用 React 遇到問題時，才使用 Redux。 一般而言，如果隨著時間的推移，數據處于合理的變動之中、需要一個單一的數據源、在 React 頂層組件 state 中維護所有內容的辦法已經無法滿足需求，這個時候就需要使用 Redux 了。 在打算使用 Redux 的時候進行權衡是非常重要的。它從設計之初就不是為了編寫最短、最快的代碼，它是為了解決 “當有確定的狀態發生改變時，數據從哪里來” 這種可預測行為的問題的。它要求你在應用程序中遵循特定的約定：應用的狀態需要存儲為純數據的格式、用普通的對象描述狀態的改變、用不可更新的純函數式方式來處理狀態變化。這也成了抱怨是“樣板代碼”的來源。這些約束需要開發人員一起來努力維護，但也打開了一扇扇可能的大門（比如：數據持久性、同步）。 如果你只是剛開始學習 React，你應該首先專注于 React，然后再看看 Redux 是否適合于你的應用。 最后需要說明的是：Redux 僅僅是個工具。它是一個偉大的工具，經常有一個很棒的理由去使用它，但也有很多的理由不去使用它。時刻注意對你的工具做出明確的決策，并且權衡每個決策帶來的利弊。 #### 補充資料 **文檔** - [Introduction: Motivation](introduction/Motivation.md) **文章** - [React How-To](https://github.com/petehunt/react-howto) - [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) - [The Case for Flux](https://medium.com/swlh/the-case-for-flux-379b7d1982c6) **討論** - [Twitter: Don't use Redux until...](https://twitter.com/dan_abramov/status/699241546248536064) - [Twitter: Redux is designed to be predictable, not concise](https://twitter.com/dan_abramov/status/733742952657342464) - [Twitter: Redux is useful to eliminate deep prop passing](https://twitter.com/dan_abramov/status/732912085840089088) - [Stack Overflow: Why use Redux over Facebook Flux？](http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux) - [Stack Overflow: Why should I use Redux in this example？](http://stackoverflow.com/questions/35675339/why-should-i-use-redux-in-this-example) - [Stack Overflow: What could be the downsides of using Redux instead of Flux？](http://stackoverflow.com/questions/32021763/what-could-be-the-downsides-of-using-redux-instead-of-flux) - [Stack Overflow: When should I add Redux to a React app?](http://stackoverflow.com/questions/36631761/when-should-i-add-redux-to-a-react-app) <a id="general-only-react"></a> ### Redux 只能搭配 React 使用？ Redux 能作為任何 UI 層的 store。通常是與 React 或 React Native 搭配使用，但是也可以綁定 Angular、 Angular 2、 Vue、 Mithril 等框架使用。 Redux 提供的訂閱機制，可以與任何代碼集成。這就是說，在結合 UI 隨 state 變化的聲明式視圖時（如 React 或者其他相似的庫），Redux 就發揮它的最大作用。 <a id="general-build-tools"></a> ### Redux 需要特殊的編譯工具支持嗎？ Redux 寫法遵循 ES6 語法，但在發布時被 Webpack 和 Babel 編譯成了 ES5，所以在使用時可以忽略 JavaScript 的編譯過程。 Redux 也提供了 UMD 版本，可以直接使用而不需要任何編譯過程。[counter-vanilla](https://github.com/reactjs/redux/tree/master/examples/counter-vanilla) 示例用 `<script>` 標簽的方式展示了 Redux 基本的 ES5 用法。正如相關 pull request 中的說法： > Counter Vanilla 例子意圖是消除 Redux 需要 Webpack、 React、 熱重載、 sagas、 action 創建函數、 constants、 Babel、 npm、 CSS 模塊化、 decorators、 fluent Latin、 Egghead subscription、 博士學位或者需要達到 Exceeds Expectations O.W.L. 這一級別的荒謬觀點。 > 僅僅是 HTML， 一些 `<script>` 標簽，和簡單的 DOM 操作而已。