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

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

使用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)容都是艱難的。因此，在這篇文章中，我們將重點(diǎn)關(guān)注添加新聯(lián)系人并顯示新添加的聯(lián)系人的Redux部分。從Redux的角度來看，我們將初始化狀態(tài)，創(chuàng)建商店，添加還原器和動(dòng)作等。

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

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

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

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

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

首先有一個(gè)狀態(tài)樹的粗略草圖是一個(gè)好主意。我認(rèn)為，從長遠(yuǎn)來看，這將為您節(jié)省很多時(shí)間。這是可能狀態(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> //切換復(fù)選框等。<br> }<br> }<br> }<br><br>

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

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

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

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

 //其他進(jìn)口<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ā)人員控制臺(tái)中看到此功能。

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

概括

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

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

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