開始使用Redux：以身作則

在該系列的第二篇文章中，我們將增強對Redux的理解，並在我們已經知道的基礎上。我們將首先創建一個現實的Redux應用程序（聯繫人列表），該應用程序比基本計數器更複雜。這將有助於您加強對我在上一個教程中介紹的單個商店和多個還原概念的理解。然後，稍後，我們將討論將您的Redux狀態通過React應用程序和您在從頭開始創建項目時應考慮的最佳實踐的綁定。

但是，如果您尚未閱讀第一篇文章，就可以了 - 只要您知道Redux基礎知識，您仍然應該能夠跟進。該教程的代碼在存儲庫中可用，您可以將其用作起點。

使用Redux創建聯繫人列表

我們將構建具有以下功能的基本聯繫列表：

• 顯示所有聯繫人
• 搜索聯繫人
• 從服務器獲取所有聯繫人
• 添加新聯繫人
• 將新的聯繫數據推入服務器

這是我們的應用程序的樣子：

一口氣覆蓋所有內容都是艱難的。因此，在這篇文章中，我們將重點關注添加新聯繫人並顯示新添加的聯繫人的Redux部分。從Redux的角度來看，我們將初始化狀態，創建商店，添加還原器和動作等。

在下一個教程中，我們將學習如何從React前端連接React，Redux和Dispatch Redux動作。在最後一部分中，我們將把重點轉向使用Redux進行API調用。這包括從服務器中獲取聯繫人並在添加新聯繫人時提出服務器請求。除此之外，我們還將創建一個搜索欄功能，可讓您搜索所有現有的聯繫人。

創建狀態樹的草圖

您可以從我的GitHub存儲庫下載React-Redux演示應用程序。克隆回購，並使用V1分支作為起點。 V1分支與Create-React-App模板非常相似。唯一的區別是，我添加了一些空目錄來組織Redux。這是目錄結構。

 。<br> ├─..pand.json<br> ├ - 公共<br>├├前<br>├ -  src<br> ││├─-動作<br>│├├─papp.js<br>組件<br>││├├-容器<br>│├├─Index.js<br> │├├─..-還原器<br>│└└└-商店<br>└ -  YARN.LOCK<br>

另外，您可以從頭開始創建一個新項目。無論哪種方式，您都需要安裝基本的React樣板和Redux，然後才能開始。

首先有一個狀態樹的粗略草圖是一個好主意。我認為，從長遠來看，這將為您節省很多時間。這是可能狀態樹的粗略草圖。

 const initialstate = {<br> 聯繫人：{<br> 聯絡列表：[]，<br> newContact：{<br> 姓名： ''，<br> 姓： ''，<br> 電子郵件： ''，<br> 地址： ''，<br> 電話： ''<br> }，，<br> UI：{<br> //此處所有與UI相關的狀態。例如：隱藏/顯示模式，<br> //切換複選框等。<br> }<br> }<br> }<br><br>

我們的商店需要具有兩個屬性：CombinerEducers，可以使您創建多個還原器，然後將它們組合成單個還原功能。組合形成器功能可增強可讀性。因此，我將把縮略器分為兩個 - 一個用戶掛鉤，以管理您的React應用程序中的組件級狀態。

本著同樣的精神，Redux引入了一些不同的鉤子，以使我們能夠在編寫最小代碼時在功能組件中執行通常的任務（派遣動作，獲取狀態等）。這些鉤子首先在React Redux 7.1中添加。例如，要派遣操作並獲取狀態樹，Redux提供了以下鉤子：

• 用途：獲取狀態樹，甚至統計的分支

現在，有了這些鉤子，我們可以重構上面的代碼：

 //其他進口<br><br>//導入redux掛鉤<br>導入{underispatch，useelector}從'react-redux'<br><br> //從Hook返回調度函數<br>const dispatch = underispatch（）<br><br> //調用getstore（）創建商店對象<br>const Store = getStore（）;<br><br> //使用useElector獲取狀態樹<br>const state = useselector（state => state）<br><br> //獲得國家的UI分支<br>const ui = useselector（state => state.ui）<br><br> / *返回isContactformHidden返回false */<br> dispatch（togglecontactform（））;<br> / *返回isContactformHidden返回false */<br> dispatch（togglecontactform（））;<br> / *更新聯繫人的狀態。newcontact對象 */<br> dispatch（handleinputchange（'email'，'manjunath@example.com'）<br><br>退訂（）;<br>

如果一切正常，則應在開發人員控制台中看到此功能。

就是這樣！在開發人員控制台中，您可以看到Redux Store已記錄，因此您可以在每個操作後看到它的變化。

概括

我們為我們的出色聯繫列表應用程序創建了一個裸露的Redux應用程序。我們了解了還原器，將還原器分裂以使我們的應用結構清潔器以及為商店變異的撰寫措施。

在帖子結束時，我們使用store.subscribe()方法訂閱了商店。從技術上講，如果您要與Redux使用React，這不是完成工作的最佳方法。有更多優化的方法可以將React前端與Redux連接起來。我們將在下一個教程中介紹這些內容。

以上是開始使用Redux：以身作則的詳細內容。更多資訊請關注PHP中文網其他相關文章！