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

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

使用Redux創(chuàng)建聯(lián)繫人列表

我們將構(gòu)建具有以下功能的基本聯(lián)繫列表：

• 顯示所有聯(lián)繫人
• 搜索聯(lián)繫人
• 從服務(wù)器獲取所有聯(lián)繫人
• 添加新聯(lián)繫人
• 將新的聯(lián)繫數(shù)據(jù)推入服務(wù)器

這是我們的應(yīng)用程序的樣子：

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

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

創(chuàng)建狀態(tài)樹的草圖

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

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

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

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

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

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

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

• 用途：獲取狀態(tài)樹，甚至統(tǒng)計的分支

現(xiàn)在，有了這些鉤子，我們可以重構(gòu)上面的代碼：

 //其他進口<br><br>//導(dǎo)入redux掛鉤<br>導(dǎo)入{underispatch，useelector}從'react-redux'<br><br> //從Hook返回調(diào)度函數(shù)<br>const dispatch = underispatch（）<br><br> //調(diào)用getstore（）創(chuàng)建商店對象<br>const Store = getStore（）;<br><br> //使用useElector獲取狀態(tài)樹<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> / *更新聯(lián)繫人的狀態(tài)。newcontact對象 */<br> dispatch（handleinputchange（'email'，'manjunath@example.com'）<br><br>退訂（）;<br>

如果一切正常，則應(yīng)在開發(fā)人員控制臺中看到此功能。

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

概括

我們?yōu)槲覀兊某錾?lián)繫列表應(yīng)用程序創(chuàng)建了一個裸露的Redux應(yīng)用程序。我們了解了還原器，將還原器分裂以使我們的應(yīng)用結(jié)構(gòu)清潔器以及為商店變異的撰寫措施。

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

以上是開始使用Redux：以身作則的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！