本文經(jīng)Vildan Softic同行評(píng)審。感謝所有SitePoint的同行評(píng)審員，讓SitePoint的內(nèi)容盡善盡美！

我屬於那種喜歡從零開(kāi)始，並了解一切工作原理的開(kāi)發(fā)者。雖然我知道這給自己帶來(lái)了（不必要的）工作量，但這確實(shí)幫助我欣賞和理解特定框架、庫(kù)或模塊背後的機(jī)制。

最近，我又經(jīng)歷了這樣的時(shí)刻，開(kāi)始使用Redux和純JavaScript開(kāi)發(fā)一個(gè)Web應(yīng)用程序。在本文中，我想概述我的應(yīng)用程序結(jié)構(gòu)，檢查我早期（最終失敗的）迭代，然後看看我最終選擇的解決方案以及在此過(guò)程中學(xué)到的知識(shí)。

關(guān)鍵要點(diǎn)

• Redux可以不依賴React，使用純JavaScript管理應(yīng)用程序狀態(tài)，展示了其在不同UI層中進(jìn)行狀態(tài)管理的靈活性。
• 正確初始化和管理Redux存儲(chǔ)至關(guān)重要；應(yīng)在應(yīng)用程序入口點(diǎn)創(chuàng)建存儲(chǔ)，並將其傳遞給組件，以避免循環(huán)依賴等問(wèn)題。
• 在僅使用Redux的設(shè)置中，組件可以類似於React的組件結(jié)構(gòu)，分為表現(xiàn)層和容器層，這有助於分離關(guān)注點(diǎn)並明確角色定義。
• 與React的虛擬DOM（根據(jù)狀態(tài)更新自動(dòng)處理UI更改）不同，在使用純JavaScript和Redux時(shí)，需要手動(dòng)更新DOM。
• 建議實(shí)現(xiàn)用例驅(qū)動(dòng)的存儲(chǔ)，確保僅存儲(chǔ)必要的數(shù)據(jù)，這可以通過(guò)避免不必要的狀態(tài)持久化來(lái)提高性能和用戶體驗(yàn)。

設(shè)置

您可能聽(tīng)說(shuō)過(guò)流行的React.js和Redux組合，它使用最新的前端技術(shù)構(gòu)建快速而強(qiáng)大的Web應(yīng)用程序。

React是由Facebook創(chuàng)建的用於構(gòu)建用戶界面的基於組件的開(kāi)源庫(kù)。雖然React只是一個(gè)視圖層（不是像Angular或Ember這樣的完整框架），但Redux管理應(yīng)用程序的狀態(tài)。它充當(dāng)可預(yù)測(cè)的狀態(tài)容器，其中整個(gè)狀態(tài)存儲(chǔ)在一個(gè)單一的對(duì)象樹(shù)中，並且只能通過(guò)發(fā)出所謂的action來(lái)更改。如果您完全不了解這個(gè)主題，我建議您閱讀這篇文章。

對(duì)於本文的其餘部分，不需要成為Redux專家，但至少對(duì)它的概念有一定的了解會(huì)有所幫助。

無(wú)React的Redux——從零開(kāi)始的應(yīng)用程序

Redux的優(yōu)點(diǎn)在於它迫使您提前思考並儘早了解應(yīng)用程序的設(shè)計(jì)。您開(kāi)始定義實(shí)際應(yīng)該存儲(chǔ)什麼，哪些數(shù)據(jù)可以並且應(yīng)該更改，以及哪些組件可以訪問(wèn)存儲(chǔ)。但由於Redux只關(guān)注狀態(tài)，我發(fā)現(xiàn)自己有點(diǎn)困惑如何構(gòu)建和連接應(yīng)用程序的其餘部分。 React在引導(dǎo)您完成所有步驟方面做得很好，但如果沒(méi)有它，就需要我弄清楚什麼方法最有效。

所討論的應(yīng)用程序是一個(gè)針對(duì)移動(dòng)設(shè)備優(yōu)先的俄羅斯方塊克隆，它有幾個(gè)不同的視圖。實(shí)際的遊戲邏輯在Redux中完成，而離線功能由localStorage和自定義視圖處理提供。存儲(chǔ)庫(kù)可以在GitHub上找到，儘管該應(yīng)用程序仍在積極開(kāi)發(fā)中，並且我是在開(kāi)發(fā)過(guò)程中撰寫(xiě)這篇文章的。

定義應(yīng)用程序架構(gòu)

我決定採(cǎi)用在Redux和React項(xiàng)目中常見(jiàn)的文件夾結(jié)構(gòu)。這是一個(gè)邏輯結(jié)構(gòu)，適用於許多不同的設(shè)置。這個(gè)主題有很多變體，大多數(shù)項(xiàng)目都略有不同，但整體結(jié)構(gòu)相同。

src/scripts/

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

我的標(biāo)記被分隔到另一個(gè)目錄中，最終由單個(gè)index.html文件呈現(xiàn)。該結(jié)構(gòu)類似於scripts/，以便在整個(gè)代碼庫(kù)中保持一致的架構(gòu)。

src/markup/

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

管理和訪問(wèn)存儲(chǔ)

要訪問(wèn)存儲(chǔ)，需要?jiǎng)?chuàng)建一次並將其傳遞給應(yīng)用程序的所有實(shí)例。大多數(shù)框架都使用某種依賴注入容器，因此我們作為框架的用戶不必自己想出解決方案。但是，當(dāng)我使用自己的解決方案時(shí)，如何才能讓它對(duì)我的所有組件都可用呢？

我的第一次迭代失敗了。我不知道為什麼我認(rèn)為這是一個(gè)好主意，但我將存儲(chǔ)放在它自己的模塊（scripts/store/index.js）中，然後可以由應(yīng)用程序的其他部分導(dǎo)入。我最終後悔了，並很快處理了循環(huán)依賴。問(wèn)題是，當(dāng)組件嘗試訪問(wèn)存儲(chǔ)時(shí)，存儲(chǔ)沒(méi)有正確初始化。我製作了一個(gè)圖表來(lái)演示我正在處理的依賴關(guān)係流程：

應(yīng)用程序入口點(diǎn)正在初始化所有組件，然後通過(guò)直接或通過(guò)輔助函數(shù)（此處稱為connect）內(nèi)部使用存儲(chǔ)。但是，由於存儲(chǔ)不是顯式創(chuàng)建的，而只是在其自身模塊中的副作用，組件最終在存儲(chǔ)創(chuàng)建之前就使用了存儲(chǔ)。無(wú)法控制組件或輔助函數(shù)第一次調(diào)用存儲(chǔ)的時(shí)間。這很混亂。

存儲(chǔ)模塊如下所示：

scripts/store/index.js (? bad)

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

如上所述，存儲(chǔ)是作為副作用創(chuàng)建的，然後導(dǎo)出。輔助函數(shù)也需要存儲(chǔ)。

scripts/store/connect.js (? bad)

import store from './'

export function getItemList () {
  return store.getState().items.all
}

這正是我的組件最終相互遞歸的時(shí)刻。輔助函數(shù)需要存儲(chǔ)才能運(yùn)行，並且同時(shí)從存儲(chǔ)初始化文件中導(dǎo)出，以便使它們可以訪問(wèn)應(yīng)用程序的其他部分。您看到這聽(tīng)起來(lái)有多亂嗎？

解決方案

現(xiàn)在看來(lái)很明顯的事情，我花了一段時(shí)間才理解。我通過(guò)將初始化移動(dòng)到我的應(yīng)用程序入口點(diǎn)（scripts/index.js），並將其傳遞給所有必需的組件來(lái)解決此問(wèn)題。

同樣，這與React實(shí)際使存儲(chǔ)可訪問(wèn)的方式非常相似（查看源代碼）。它們一起工作得如此之好是有原因的，為什麼不學(xué)習(xí)它的概念呢？

應(yīng)用程序入口點(diǎn)首先創(chuàng)建存儲(chǔ)，然後將其傳遞給所有組件。然後，組件可以連接到存儲(chǔ)並調(diào)度操作、訂閱更改或獲取特定數(shù)據(jù)。

讓我們來(lái)看一下更改：

scripts/store/configureStore.js (? good)

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

我保留了該模塊，但改為了導(dǎo)出一個(gè)名為configureStore的函數(shù)，該函數(shù)在代碼庫(kù)中的其他地方創(chuàng)建存儲(chǔ)。 請(qǐng)注意，這只是基本概念；我還使用了Redux DevTools擴(kuò)展程序並通過(guò)localStorage加載持久化狀態(tài)。

scripts/store/connect.js (? good)

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

connect輔助函數(shù)基本上沒(méi)有改變，但現(xiàn)在需要將存儲(chǔ)作為參數(shù)傳遞。起初我猶豫是否要使用此解決方案，因?yàn)槲艺J(rèn)為“那麼輔助函數(shù)有什麼意義呢？”?，F(xiàn)在我認(rèn)為它們很好而且足夠高級(jí)，使一切更易於閱讀。

scripts/index.js

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

這是應(yīng)用程序入口點(diǎn)。存儲(chǔ)被創(chuàng)建，並傳遞給所有組件。 PageControls為特定操作按鈕添加全局事件偵聽(tīng)器，TetrisGame是實(shí)際的遊戲組件。在將存儲(chǔ)移到這里之前，它看起來(lái)基本相同，但沒(méi)有將存儲(chǔ)分別傳遞給所有模塊。如前所述，組件可以通過(guò)我失敗的連接方法訪問(wèn)存儲(chǔ)。

組件

我決定使用兩種組件：表現(xiàn)層和容器組件。表現(xiàn)層組件除了純DOM處理之外什麼也不做；它們不知道存儲(chǔ)。另一方面，容器組件可以調(diào)度操作或訂閱更改。

Dan Abramov已經(jīng)為React組件寫(xiě)了一篇很棒的文章，但這套方法也可以應(yīng)用於任何其他組件架構(gòu)。

不過(guò)，對(duì)我來(lái)說(shuō)也有例外。有時(shí)組件非常小，只做一件事情。我不想將它們分成上述模式之一，所以我決定將它們混合使用。如果組件增長(zhǎng)並獲得更多邏輯，我將對(duì)其進(jìn)行分離。

scripts/components/pageControls.js

import store from './'

export function getItemList () {
  return store.getState().items.all
}

上面的示例就是其中一個(gè)組件。它有一個(gè)元素列表（在本例中是所有具有data-action屬性的元素），並根據(jù)屬性內(nèi)容在單擊時(shí)調(diào)度操作。僅此而已。然後，其他模塊可能會(huì)偵聽(tīng)存儲(chǔ)中的更改並相應(yīng)地更新自身。如前所述，如果組件還進(jìn)行了DOM更新，我將對(duì)其進(jìn)行分離。

現(xiàn)在，讓我向您展示這兩種組件類型的清晰分離。

更新DOM

在我開(kāi)始該項(xiàng)目時(shí)，我遇到的一個(gè)更大的問(wèn)題是如何實(shí)際更新DOM。 React使用稱為虛擬DOM的DOM的快速內(nèi)存中表示來(lái)最大限度地減少DOM更新。

我實(shí)際上是在考慮做同樣的事情，如果我的應(yīng)用程序變得更大且DOM更繁重，我可能會(huì)切換到虛擬DOM，但就目前而言，我進(jìn)行經(jīng)典DOM操作，這與Redux配合得很好。

基本流程如下：

• 初始化容器組件的新實(shí)例並傳遞存儲(chǔ)以供內(nèi)部使用
• 組件訂閱存儲(chǔ)中的更改
• 並使用不同的表現(xiàn)層組件在DOM中呈現(xiàn)更新

注意：對(duì)於JavaScript中與DOM相關(guān)的任何內(nèi)容，我都是$符號(hào)前綴的粉絲。正如您可能猜到的那樣，它取自jQuery的$。因此，純表現(xiàn)層組件文件名以美元符號(hào)為前綴。

scripts/index.js

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

這裡沒(méi)有什麼花哨的東西。導(dǎo)入、創(chuàng)建和初始化容器組件ScoreObserver。它究竟做了什麼？它更新所有與分?jǐn)?shù)相關(guān)的視圖元素：高分列表和遊戲期間的當(dāng)前分?jǐn)?shù)信息。

scripts/components/scoreObserver/index.js

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

請(qǐng)記住，這是一個(gè)簡(jiǎn)單的組件；其他組件可能具有更複雜的邏輯和需要處理的事情。這裡發(fā)生了什麼？ ScoreObserver組件保存對(duì)存儲(chǔ)的內(nèi)部引用，並創(chuàng)建新實(shí)例的兩個(gè)表現(xiàn)層組件以供以後使用。 init方法訂閱存儲(chǔ)更新，並在每次存儲(chǔ)更改時(shí)更新$label組件——但前提是遊戲?qū)嶋H上正在運(yùn)行。

updateScoreBoard方法在其他地方使用。每次發(fā)生更改時(shí)更新列表是沒(méi)有意義的，因?yàn)橐晥D無(wú)論如何都是不活動(dòng)的。還有一個(gè)路由組件，它在每次視圖更改時(shí)更新或停用不同的組件。它的API大致如下所示：

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

注意：$（和$$）不是jQuery引用，而是document.querySelector的便捷實(shí)用程序快捷方式。

scripts/components/scoreObserver/$board.js

import store from './'

export function getItemList () {
  return store.getState().items.all
}

同樣，這是一個(gè)基本示例和一個(gè)基本組件。 updateBoard()方法獲取一個(gè)數(shù)組，對(duì)其進(jìn)行迭代，並將內(nèi)容插入到分?jǐn)?shù)列表中。

scripts/components/scoreObserver/$label.js

import { createStore } from 'redux'
import reducers from '../reducers'

export default function configureStore () {
  return createStore(reducers)
}

此組件與上面的ScoreBoard幾乎完全相同，但只更新單個(gè)元素。

其他錯(cuò)誤和建議

另一個(gè)重要點(diǎn)是實(shí)現(xiàn)用例驅(qū)動(dòng)的存儲(chǔ)。我認(rèn)為只存儲(chǔ)對(duì)應(yīng)用程序必不可少的內(nèi)容很重要。一開(kāi)始，我?guī)缀醮鎯?chǔ)了一切：當(dāng)前活動(dòng)視圖、遊戲設(shè)置、分?jǐn)?shù)、懸停效果、用戶的呼吸模式等等。

雖然這可能與一個(gè)應(yīng)用程序相關(guān)，但與另一個(gè)應(yīng)用程序無(wú)關(guān)。存儲(chǔ)當(dāng)前視圖並在重新加載時(shí)繼續(xù)在完全相同的位置可能很好，但在我的情況下，這感覺(jué)像是糟糕的用戶體驗(yàn)，而且比有用的更煩人。您也不想存儲(chǔ)菜單或模態(tài)的切換，對(duì)吧？用戶為什麼要回到那個(gè)特定狀態(tài)？在較大的Web應(yīng)用程序中，這可能是有意義的。但在我的小型移動(dòng)遊戲重點(diǎn)遊戲中，回到設(shè)置屏幕只是因?yàn)槲覐哪茄e離開(kāi)，這相當(dāng)煩人。

結(jié)論

我已經(jīng)使用和不使用React完成了Redux項(xiàng)目，我的主要收穫是，應(yīng)用程序設(shè)計(jì)中的巨大差異並非必要。 React中使用的大多數(shù)方法實(shí)際上都可以適應(yīng)任何其他視圖處理設(shè)置。我花了一段時(shí)間才意識(shí)到這一點(diǎn)，因?yàn)槲乙婚_(kāi)始認(rèn)為我必須做不同的事情，但我最終發(fā)現(xiàn)這沒(méi)有必要。

然而，不同的是您初始化模塊、存儲(chǔ)的方式，以及組件對(duì)整體應(yīng)用程序狀態(tài)的了解程度。概念保持不變，但實(shí)現(xiàn)和代碼量完全適合您的需求。

Redux是一個(gè)很棒的工具，它有助於以更周到的方式構(gòu)建您的應(yīng)用程序。單獨(dú)使用，沒(méi)有任何視圖庫(kù)，一開(kāi)始可能會(huì)非常棘手，但一旦您克服了最初的困惑，就沒(méi)有任何東西可以阻止您了。

您如何看待我的方法？您是否獨(dú)自使用Redux和不同的視圖處理設(shè)置？我很樂(lè)意收到您的反饋並在評(píng)論中討論它。

如果您想了解更多關(guān)於Redux的信息，請(qǐng)查看我們的課程《重寫(xiě)和測(cè)試Redux以解決設(shè)計(jì)問(wèn)題》迷你課程。在本課程中，您將構(gòu)建一個(gè)Redux應(yīng)用程序，該應(yīng)用程序通過(guò)websocket連接接收按主題組織的推文。為了讓您了解即將發(fā)生的事情，請(qǐng)查看下面的免費(fèi)課程。

加載播放器……關(guān)於無(wú)React的Redux的常見(jiàn)問(wèn)題解答（FAQ）

使用Redux與React和不使用React的主要區(qū)別是什麼？

Redux是一個(gè)適用於JavaScript應(yīng)用程序的可預(yù)測(cè)狀態(tài)容器，可以與任何UI層一起使用。使用Redux與React和不使用React之間的主要區(qū)別在於UI層與Redux存儲(chǔ)交互的方式。當(dāng)與React一起使用時(shí)，Redux可以利用React的基於組件的架構(gòu)及其生命週期方法來(lái)自動(dòng)處理狀態(tài)更改時(shí)組件的更新。如果沒(méi)有React，您需要手動(dòng)訂閱存儲(chǔ)並在狀態(tài)更改時(shí)處理UI的更新。

如何在沒(méi)有React的情況下處理Redux中的異步操作？

Redux中的異步操作通常使用Redux Thunk或Redux Saga等中間件來(lái)處理。這些中間件允許您調(diào)度函數(shù)（thunk）或更複雜的異步操作（saga），而不是普通的對(duì)象。即使沒(méi)有React，您仍然可以在Redux存儲(chǔ)中使用這些中間件。您只需要在使用Redux的applyMiddleware函數(shù)創(chuàng)建存儲(chǔ)時(shí)應(yīng)用中間件即可。

我可以在沒(méi)有React的情況下使用Redux DevTools嗎？

是的，Redux DevTools不依賴於React，可以與任何使用Redux的UI層一起使用。您可以通過(guò)在創(chuàng)建Redux存儲(chǔ)時(shí)將其添加為中間件來(lái)將Redux DevTools集成到您的應(yīng)用程序中。這將允許您實(shí)時(shí)檢查應(yīng)用程序的狀態(tài)和操作，即使沒(méi)有React。

如何在我的UI組件連接到Redux存儲(chǔ)而無(wú)需React？

如果沒(méi)有React及其connect函數(shù)，您需要手動(dòng)訂閱Redux存儲(chǔ)並在狀態(tài)更改時(shí)更新UI組件。您可以使用store.subscribe方法訂閱存儲(chǔ)，該方法採(cǎi)用一個(gè)偵聽(tīng)器函數(shù)，該函數(shù)將在每次調(diào)度操作時(shí)被調(diào)用。在此偵聽(tīng)器函數(shù)中，您可以使用store.getState獲取存儲(chǔ)的當(dāng)前狀態(tài)並相應(yīng)地更新UI組件。

我可以將Redux與其他庫(kù)或框架（如Vue或Angular）一起使用嗎？

是的，Redux不依賴於React，可以與任何UI層一起使用。對(duì)於其他庫(kù)和框架（如Vue和Angular），都提供了提供與React的connect函數(shù)類似功能的綁定。這些綁定允許您輕鬆地將UI組件連接到Redux存儲(chǔ)，並在狀態(tài)更改時(shí)處理組件的更新。

如何在沒(méi)有React的情況下測(cè)試我的Redux代碼？

在沒(méi)有React的情況下測(cè)試Redux代碼類似於使用React測(cè)試它。您可以使用任何JavaScript測(cè)試框架（如Jest或Mocha）為您的action creators和reducers創(chuàng)建單元測(cè)試。對(duì)於測(cè)試異步操作，您可以使用模擬存儲(chǔ)來(lái)模擬Redux存儲(chǔ)。

如何在沒(méi)有React的情況下處理Redux中的副作用？

Redux中的副作用通常使用Redux Thunk或Redux Saga等中間件來(lái)處理。這些中間件允許您調(diào)度具有副作用的函數(shù)或更複雜的異步操作，例如進(jìn)行API調(diào)用。即使沒(méi)有React，您仍然可以在Redux存儲(chǔ)中使用這些中間件。

我可以將Redux與純JavaScript一起使用嗎？

是的，Redux可以與純JavaScript一起使用。您可以創(chuàng)建一個(gè)Redux存儲(chǔ)，向其調(diào)度操作，並僅使用純JavaScript訂閱狀態(tài)中的更改。但是，如果沒(méi)有像React這樣的庫(kù)或框架來(lái)處理UI的更新，您需要在狀態(tài)更改時(shí)手動(dòng)更新UI組件。

如何在沒(méi)有React的情況下構(gòu)建Redux代碼？

Redux代碼的結(jié)構(gòu)並不取決於您是否使用React。您仍然可以遵循構(gòu)建Redux代碼的相同最佳實(shí)踐，例如將操作、reducers和selectors分離到不同的文件或文件夾中，並以規(guī)範(fàn)化和模塊化的方式組織您的狀態(tài)。

我可以在沒(méi)有React的情況下使用Redux中間件嗎？

是的，Redux中間件不依賴於React，可以與任何使用Redux的UI層一起使用。 Redux中的中間件用於處理副作用和異步操作，等等。您可以使用Redux的applyMiddleware函數(shù)將中間件應(yīng)用於您的Redux存儲(chǔ)，無(wú)論您是否使用React。

以上是沒(méi)有反應(yīng)的redux的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！