Redux的基礎概念理解

在學習React時瞭解到能夠用Redux來做爲React應用的狀態管理器，那麼redux究竟是什麼呢？該怎麼使用呢？我須要好好了解一番

爲何React 須要 Redux 這類狀態管理庫

爲了方便組件間的通訊

React組件有兩個很重要的屬性叫props和state，他們本質是一個JavaScript對象。 props屬性是隻讀的，它們老是在整個應用中從父組件傳遞到子組件。子組件永遠不能將 prop 送回父組件。 state屬性用來維護組件內部數據。該屬性是私有的，而且徹底受控於當前組件。

• this.state 來得到state對象
• this.setState() 來更新state對象 當用戶操做、網絡響應或者其餘變化而須要動態更新UI的時候，咱們經過更新其state來實現。

在 React 中，父組件向子組件通訊很容易，可是祖父向孫子，子向父，兄弟組件間的通訊則比較麻煩，須要經過props由上到下層層傳遞，或者由下到上層層回調，若是層級太深，顯然實現起來很麻煩。而在實際的大型的應用，這幾種場景是沒法避免的，因此須要藉助 Redux 來解決這個問題。

那Redux是如何解決的呢？簡單來講就是，整個應用的狀態state存儲在一個 叫作 Store 的對象裏。使得應用的整個狀態存儲在同一個地方。任何組件都能直接訪問到它，改變它，不過改變state也須要遵循必定的約束規則，讓狀態變化結果變得能預測。當數據狀態發生變化後，使用到數據的地方也會被通知到。

所以，有了Redux來做爲狀態管理器，組件間的通訊就很是方便了。祖父組件向孫子組件傳遞state信息再也不須要經過父組件來傳遞了。相同的，孫子組件向祖父組件傳遞數據也不須要經過調用父組件回調函數來實現了。

Redux基礎知識

Redux官方文檔

Redux是什麼

Redux是一個前端開發庫，是 JavaScript 程序的可預測狀態容器，用於整個應用的狀態管理。提供最簡化 API，作到行爲的徹底可預測。使得 Redux 開發的應用易於測試，能夠在不一樣環境中運行，並顯示一致的行爲。

Redux 和 React 之間沒有關係。Redux搭配React使用很是好用而已。除此以外，Redux還支持 React、Angular、Ember、jQuery 甚至純 JavaScript。

Redux遵循的三個原則

Redux 不容許程序直接修改數據，而是用一個叫做 「action」 的普通對象來對更改進行描述。

• 單一數據源 整個應用的數據狀態都存儲在一個叫作 Store 的對象裏。使得應用的整個狀態存儲在同一個地方。單一狀態樹能夠更容易地跟蹤隨時間的變化，並調試或檢查應用程序。

• 不能直接修改state 不能像在React中經過this.setState() 來更新state對象，改變狀態的惟一方法是去觸發一個動做。動做是描述變化的普通 JS 對象。該操做是對數據更改的最小表示。

• 使用純函數進行修改 爲了指定狀態樹如何經過操做進行轉換，須要使用純函數保證結果的一致性。每次相同的 action操做做用於相同的狀態，獲得的新的狀態必定要是相同的。

Redux核心概念

Redux基於遵循的三個原則，核心概念有：

• store – 整個程序的狀態/對象樹保存在Store中。
• action – 這是一個用來描述發生了什麼事情的對象。
• reducer – 這是一個肯定狀態將如何變化的地方。
• dispatch – 觸發action，將action和reducer對應起來。
• applyMiddleware - 這是 action 被髮起以後，到達 reducer 以前的擴展點。
• view - 展現狀態信息的UI。

store

原則1的實踐

應用中全部的 state 都以一個對象樹的形式儲存在一個單一的 store 中。

action

原則2的實踐

惟一改變 state 的辦法是觸發 action，一個描述發生什麼的對象。本質上是 JavaScript 普通對象。Redux中約定了action 內必須使用一個字符串類型的 type 字段來表示將要執行的動做。多數狀況下，type 會被定義成字符串常量。

強制使用 action 來描述全部變化帶來的好處是能夠清晰地知道應用中到底發生了什麼。若是一些東西改變了，就能夠知道爲何變。action 就像是描述發生了什麼的指示器。

reducer

原則3的實踐

爲了把 action 和 state 串起來，開發一些函數，這就是 reducer。reducer 只是一個接收先前的 state 和 action，並返回新的 state 的純函數。

reducer是純函數，必定要保持純淨。只要傳入參數相同，返回計算獲得的下一個 state 就必定相同。沒有特殊狀況、沒有反作用，沒有 API 請求、沒有變量修改，單純執行計算。

reducer是純函數。它僅僅用於計算下一個 state。它應該是徹底可預測的。屢次傳入相同的輸入必須產生相同的輸出。

Dispatch

原則2的實踐

dispatch派發action來調用reducer方法，從而更改數據。

applyMiddleware

中間件函數用來對store.dispatch函數進行擴展（或者說是加工）。它提供的是位於 action 被髮起以後，到達 reducer 以前的擴展點。 你能夠利用 Redux middleware 來進行日誌記錄、建立崩潰報告、調用異步接口或者路由等等。

參考資料

爲何 React 須要 Redux 這類狀態管理庫