Redux入門：為什麼Redux？

當您學習反應時，您幾乎總是會聽到人們說Redux有多出色，並且應該嘗試一下。 React生態系統正在以快速的速度生長，並且您可以與React相連，例如Flow，Redux，Middlewares，Mobx等。

學習反應很容易，但是習慣了整個反應生態系統需要時間。本教程是對React生態系統REDUX的整體組成部分之一的介紹。

基本的非列克術語

這是您可能不熟悉的一些常用術語，但它們本身並不是特定於Redux。您可以瀏覽本節，並在某些東西沒有意義時回到這裡。

純函數

純函數只是正常功能，其必須滿足兩個其他約束：

1. 給定一組輸入，該函數應始終返回相同的輸出。
2. 它沒有產生副作用。

例如，這是一個純函數，它返回兩個數字的總和。

 / *純添加功能 */<br> const add =（x，y）=> {<br> 返回xy;<br> }<br><br> console.log（add（2,3））// 5<br><br>

純函數提供可預測的輸出，並且是確定性的。當函數執行除了計算其返回值之外的任何內容時，它就會變得不純淨。

例如，下面的添加函數使用全局狀態來計算其輸出。另外，該函數還將值記錄到控制台，這被認為是副作用。

 const y = 10;<br><br> const impureadd =（x）=> {<br> console.log（`輸入為$ {x}和$ {y}`）;<br> 返回xy;<br> }<br>

可觀察到的副作用

“可觀察的副作用”是與外界功能進行的互動的奇特術語。如果一個函數試圖將值寫入函數之外的變量或試圖調用外部方法，則可以安全地調用這些東西副作用。

但是，如果純函數調用另一個純函數，則該功能可以視為純淨的功能。這是一些常見的副作用：

• 撥打API
• 登錄控制台或打印數據
• 突變數據
• DOM操縱
• 檢索當前時間

容器和介紹組件

在使用React應用程序時，將組件體系結構分為兩個很有用。您可以將它們分為兩個類別：容器組件和呈現組件。它們也被普遍稱為智能和愚蠢的組件。

容器組件與事物的工作方式有關，而演講組件與事物的外觀有關。為了更好地理解這些概念，我在另一個教程中介紹了這一點：React中的容器與演示成分。

可變的與不變的物體

可變的對象可以定義如下：

可變的對象是一個對象，在創建後可以修改狀態。

不變性是完全相反的 - 一個不變的對像是一個對象，在創建後不能修改狀態。在JavaScript中，字符串和數字是不變的，但對象和數組卻不是。該示例表明差異更好。

 / *字符串和數字是不變的 */<br><br>令A = 10;<br><br>令b = a;<br><br> b = 3;<br><br> console.log（`a = $ {a}和b = $ {b}`）; // a = 10和b = 3<br><br> / *但是對象和數組不是 */<br><br> / *讓我們從對像開始 */<br><br>讓用戶= {<br> 名稱：“鮑勃”，<br> 年齡：22，<br> 工作：“無”<br> }<br><br> Active_user =用戶;<br><br> active_user.name =“ tim”;<br><br> //兩個對像都有相同的值<br>console.log（active_user）; // {“ name”：“ tim”，“ age”：22，“ job”：“無”}<br><br> console.log（用戶）; // {“ name”：“ tim”，“ age”：22，“ job”：“無”}<br><br> / *現在用於數組 */<br><br>讓用戶= [1,2,3,4,5]<br><br>讓usersiddup = usersId;<br><br> usersiddup.pop（）;<br><br> console.log（usersIdDup）; // [1,2,3,4]<br> console.log（usersId）; // [1,2,3,4]<br>

要使對像不變，請使用store.getState（） - 訪問應用程序的當前狀態樹。

Store.subscribe（偵聽器） - 聆聽該州的任何變化。每次派遣行動時，都會稱呼它。

讓我們創建一家商店。 Redux具有創建新商店的configureStore方法。您需要將其傳遞給還原器，儘管我們不知道那是什麼。因此，我將僅創建一個稱為還原器的函數。您可以選擇指定第二個參數，該參數設置了商店的初始狀態。

src/index.js

從“ redux”導入{configurestore};<br> //這是還原器<br>const還原=（）=> {<br> / *這裡有東西 */<br> }<br><br> //初始狀態是可選的。<br> //對於此演示，我正在使用計數器，但通常狀態是一個對象<br>const initialstate = 0<br> const Store = configurestore（reducer，initialstate）;<br>

現在，我們將收聽商店中的任何更改，然後and console.log()商店的當前狀態。

 store.subscribe（（）=> {<br> console.log（“狀態已更改” store.getState（））;<br> }））<br>

那麼我們如何更新商店？ Redux具有使這一實現的所謂動作。

行動/行動創造者

操作也是簡單的JavaScript對象，可將信息從您的應用程序發送到商店。如果您有一個非常簡單的計數器帶有增量按鈕，則按下它將導致觸發的動作，看起來像這樣：

 {<br> 類型：“增量”，<br> 有效載荷：1<br> }<br>

它們是商店唯一的信息來源。商店的狀態僅對動作發生變化。每個操作都應具有描述動作對像打算做什麼的類型屬性。除此之外，動作的結構完全取決於您。但是，請保持較小的操作，因為操作代表了轉換應用程序狀態所需的最低信息量。

例如，在上面的示例中，類型屬性設置為“增量”，並包括附加的有效載荷屬性。您可以將有效載荷屬性重命名為更有意義的東西，或者在我們的情況下，將其命名為完全有意義。您可以這樣向商店派遣行動。

 store.dispatch（{type：“增量”，有效載荷：1}）;<br>

在編碼REDUX時，通常不會直接使用操作。取而代之的是，您將調用返回操作的函數，這些功能通常稱為“動作創造者”。這是我們前面討論的增量動作的動作創建者。

 const regementCount =（count）=> {<br> 返回 {<br> 類型：“增量”，<br> 有效載荷：計數<br> }<br> }<br>

因此，要更新計數器狀態，您將需要派遣這樣的incrementCount措施：

 store.dispatch（regementCount（1））;<br> store.dispatch（regementCount（1））;<br> store.dispatch（regementCount（1））;<br>

如果您前往瀏覽器控制台，您會發現它在某種程度上工作。我們之所以變得不確定，是因為我們還沒有定義還原器。

因此，現在我們已經涵蓋了動作和商店。但是，我們需要一種機制來轉換動作提供的信息並改變商店的狀態。還原器達到了這個目的。

還原器

一個動作描述了問題，還原器負責解決問題。在較早的示例中， incrementCount方法返回了一項動作，該操作提供了有關我們要向狀態進行更改類型的信息。還原器使用此信息實際更新狀態。文檔中有一個重要的觀點，您應該在使用Redux時始終記住：

給定相同的參數，還原器應計算下一個狀態並將其返回。不足為奇。沒有副作用。沒有API呼叫。沒有突變。只是一個計算。

這意味著還原器應該是純函數。給定一組輸入，它應始終返回相同的輸出。除此之外，它不應該做更多的事情。同樣，還原器並不是副作用的地方，例如撥打AJAX調用或從API獲取數據。

讓我們為櫃檯填充還原器。

 //這是還原器<br><br>const還原器=（state = initialstate，action）=> {<br> switch（action.type）{<br> 案例“增量”：<br> 返回狀態行動<br> 預設:<br> 返回狀態<br> }<br> }<br>

還原器接受兩個論點 - 國家和行動 - 它返回了一個新狀態。

 （前州，動作）=> newstate<br>

國家接受默認值， initialState ，僅當狀態的值不確定時才使用。否則，將保留國家的實際價值。我們使用開關語句選擇正確的操作。刷新瀏覽器，一切都按預期工作。

讓我們添加一個DECREMENT案例，沒有該計數器不完整。

 //這是還原器<br><br>const還原器=（state = initialstate，action）=> {<br> switch（action.type）{<br> 案例“增量”：<br> 返回狀態行動<br> 案例“減少”：<br> 返回狀態 -  action.payload<br> 預設:<br> 返回狀態<br> }<br> }<br>

這是動作創造者。

 const dectementCount =（count）=> {<br> 返回 {<br> 類型：“減少”，<br> 有效載荷：計數<br> }<br> }<br>

最後，將其派往商店。

 store.dispatch（regementCount（4））; // 4<br> store.dispatch（dectementCount（2））; // 2<br>

就是這樣！

概括

本教程本來是用Redux管理狀態的起點。我們介紹了了解基本的Redux概念（例如商店，動作和還原器）所需的一切。在本教程結束時，我們還創建了一個工作的Redux演示計數器。儘管這並不多，但我們了解了所有拼圖的所有部分如何結合在一起。

在過去的幾年中，React越來越受歡迎。實際上，我們在市場上有許多物品可供購買，審查，實施等。如果您正在尋找圍繞React的其他資源，請隨時檢查它們。

在下一個教程中，我們將利用我們在此處學到的知識來創建REDUX的React應用程序。繼續關注直到那時。在評論中分享您的想法。

以上是Redux入門：為什麼Redux？的詳細內容。更多資訊請關注PHP中文網其他相關文章！