在Redux出現之前，在構建複雜任務時管理狀態是相當痛苦的事情。受Flux應用程序設計模式的啟發，Redux設計用於管理JavaScript應用程序中的數據狀態。雖然它主要用於React，但是可以使用Redux與不同的框架和庫（如jQuery，Angular或Vue）。

Redux確保您的應用程序的每個組件都可以直接訪問應用程序的狀態，而不必將props發送到子組件，或使用回調函數將數據發送回父組件。

在這篇文章中，我將和大家討論Redux，它如何根植於函數式編程的概念以及如何決定在應用程序中是否需要它。

為什麼我們需要Redux？

組件沒有它們的狀態嗎？為什麼你需要一個工具來幫助你管理這個狀態呢？不要誤會我的意思;React是一個比較出色的框架。可以用一個框架來編寫一個完整的應用程序。但是隨著應用程序變得越來越複雜，越來越多的組件使用一個框架來管理這個可能變得非常棘手。

這是Redux為你節省一天的地方;它減輕了這種應用中出現的複雜性。如果你有一些React的經驗，你會知道React的數據流是這樣的，父組件傳遞道具到子組件。在一個龐大的應用程序中，數據通過狀態和props流經很多組件，通信往往容易出錯。相信我，你的代碼將變得難以閱讀甚至很難改進。

再看看下面的圖表，你就知道我在說什麼：

在React（以及其他框架）中，不鼓勵兩個不具有父子級關係的組件之間的通信。 React建議，如果你必須這樣做，你可以按照Flux的模式建立你的全局事件系統 - 這就是需要Redux的地方。

藉助Redux，您可以在store中保留所有應用程序狀態。如果組件A中發生狀態更改，則會將其中繼成到store，並且需要注意組件A中狀態更改的其他組件B和C可以讀取store數據：

?看到了吧？這比我們想像的要好得多。如果我們讓組件相互通信，我們會創建一個容易出錯和不可讀的代碼庫，但有Redux加入就不同了。

組件A將其狀態更改發送到store，如果組件B和C需要此狀態更改，則可以從store中獲取它。因此，我們的數據流邏輯是無縫的。除了上面這些功能之外，使用Redux還有很多好處，我只想在那裡展示我認為最重要的三點：

1.結果的可預測性--只有一個真實的來源（store），當你將你的當前狀態與應用程序的actions和其他部分同步時不會出什麼問題。

2.可維護性--Redux對應該如何組織代碼有嚴格的指導原則;這進一步確保了可預測的結果，使代碼更容易維護。

3.易於測試--在Redux中編寫代碼涉及到與編寫可測試代碼的黃金規則相關的純函數。

你可能不需要Redux

這對你來說可能是顯而易見的，但無論如何我會提及它。你不一定要使用Redux。有時候這樣做更有意義。如果以上任何一種情況都適用於您，您可能根本不需要Redux：

1.你和你的好友（或同事）已經有了一個預先定義的方式來共享和安排組件狀態

2.你還在使用React或其他框架

3.如果您的應用程序將包含大部分簡單的操作（如UI更改），則這些操作並不一定是Redux存儲的一部分，可以在組件級別進行處理

4.您不需要管理伺服器端事件（SSE）或websockets

5.您從每個視圖的單個數據源獲取數據

Redux的一部分

對於初學者來說，其方法可能會讓人迷惑的工具，Redux的庫只有2KB，本身由三部分組成：actions，stores和reducers。

Actions

actions只是使用函數創建的事件，並將數據從應用程序發送到store。數據可以通過不同的方式發送，例如提交表單，調用API或基本的用戶交互。 Redux中的每個操作都有一個類型屬性，用於描述操作的類型以及發送給store的信息的「有效內容」。讓我們看看工作中最基本的一個action例子：

要在應用程序中的任何位置調用action，Redux將使用dispatch（）方法向Redux存儲區發送操作以指示狀態更改：

Reducers

由於Redux不允許您的應用程序對狀態進行更改並使用dispatch（）來執行此操作。 dispatch（）只是表示改變狀態的意圖，實際上並沒有改變它...這是需要Reducer進來的地方。

Reducers是一個函數，它通過調度的action來獲取應用程序的當前狀態，然後返回一個新的狀態。查看下面的reducer，它將當前狀態和一個操作作為參數，然後返回下一個狀態：

在構建更複雜的應用程序時，建議使用Redux的combineReducers（）方法。此方法將應用程序中的所有縮減器合併到一個reducer列表中，其中每個reducer處理其應用程序狀態的一部分，並且每個reducer的state參數都不相同：

還應該指出的是，Reducers應該用純粹的函數來編寫。下面我列出了這些功能的幾個特點：

1.他們不會進行外部網路或資料庫調用。

2.它們的返回值僅取決於它們的參數值。

3.他們的論據應該被看作是不變的，這意味著他們不應該被改變。

Store

Store就像Redux的心臟。這就是單一的真理來源，可以保存所有應用程序的狀態，並通過幾種方法提供對狀態的訪問，派發操作和註冊監聽器。任何分派的操作都會通過reducer向store返回一個新狀態。看看這個Redux的store基本例子：

函數式編程和Redux

如果你打算使用Redux，你應該知道函數編程是如何工作的。 Redux建立在函數式編程的基礎之上，理解函數式編程概念將使您深入了解Redux如何操作。

讓我們來看看函數式編程的關鍵指導原則：

1.它可以使用純粹的，遞歸的，高階的，閉包和匿名函數

2.它可以使用幫助函數，比如map，filter和reduce

3.它可以將功能鏈接在一起

4.它可以把功能當作一流的對象

5.它可以傳遞函數作為參數

6.它可以使用函數，遞歸和數組來控制流 狀態不變（即它是不可變的）

7.代碼執行的順序並不重要

函數式編程涉及編寫更簡單，更小和隔離的函數。遵循這種模式，代碼維護，測試和調試變得更容易。由於這些功能很小且獨立，因此可以重複使用，因此可以在需要的任何地方複製和粘貼。

這也消除了編寫更多的代碼，這在我看來是非常棒的。在使用函數式編程時，理解諸如純函數，匿名函數，閉包和高階函數等概念是很重要的。

總結

確實，Redux是管理應用程序狀態的好選擇，Redux也獲得了很大的推動力。那麼你還需要知道什麼？

除了被Uber和Twitter等公司廣泛使用外，Redux還在Wordpress等項目上成功實施。當然，Redux並不適合所有的應用程序，這是事實。主要執行簡單操作並且不需要伺服器端渲染的應用程序可能不需要Redux;他們的行為可以在組件級別進行處理。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！