公和我做好爽添厨房在线观看,国产av一区二区三区传媒

最近，我又經(jīng)歷了這樣的時(shí)刻，開始使用Redux和純JavaScript開發(fā)一個(gè)Web應(yīng)用程序。在本文中，我想概述我的應(yīng)用程序結(jié)構(gòu)，檢查我早期（最終失敗的）迭代，然后看看我最終選擇的解決方案以及在此過程中學(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)依賴等問題。
在僅使用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ù)，這可以通過避免不必要的狀態(tài)持久化來提高性能和用戶體驗(yàn)。

設(shè)置

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

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

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

無React的Redux——從零開始的應(yīng)用程序

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

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

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

我決定采用在Redux和React項(xiàng)目中常見的文件夾結(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>

管理和訪問存儲(chǔ)

要訪問存儲(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)依賴。問題是，當(dāng)組件嘗試訪問存儲(chǔ)時(shí)，存儲(chǔ)沒有正確初始化。我制作了一個(gè)圖表來演示我正在處理的依賴關(guān)系流程：

Redux without React

應(yīng)用程序入口點(diǎn)正在初始化所有組件，然后通過直接或通過輔助函數(shù)（此處稱為connect）內(nèi)部使用存儲(chǔ)。但是，由于存儲(chǔ)不是顯式創(chuàng)建的，而只是在其自身模塊中的副作用，組件最終在存儲(chǔ)創(chuàng)建之前就使用了存儲(chǔ)。無法控制組件或輔助函數(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)出，以便使它們可以訪問應(yīng)用程序的其他部分。您看到這聽起來有多亂嗎？

解決方案

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

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

Redux without React

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

讓我們來看一下更改：

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ò)展程序并通過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ù)基本上沒有改變，但現(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為特定操作按鈕添加全局事件偵聽器，TetrisGame是實(shí)際的游戲組件。在將存儲(chǔ)移到這里之前，它看起來基本相同，但沒有將存儲(chǔ)分別傳遞給所有模塊。如前所述，組件可以通過我失敗的連接方法訪問存儲(chǔ)。

組件

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

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

不過，對(duì)我來說也有例外。有時(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ì)偵聽存儲(chǔ)中的更改并相應(yīng)地更新自身。如前所述，如果組件還進(jìn)行了DOM更新，我將對(duì)其進(jìn)行分離。

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

更新DOM

在我開始該項(xiàng)目時(shí)，我遇到的一個(gè)更大的問題是如何實(shí)際更新DOM。React使用稱為虛擬DOM的DOM的快速內(nè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>

這里沒有什么花哨的東西。導(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ù)雜的邏輯和需要處理的事情。這里發(fā)生了什么？ScoreObserver組件保存對(duì)存儲(chǔ)的內(nèi)部引用，并創(chuàng)建新實(shí)例的兩個(gè)表現(xiàn)層組件以供以后使用。init方法訂閱存儲(chǔ)更新，并在每次存儲(chǔ)更改時(shí)更新$label組件——但前提是游戲?qū)嶋H上正在運(yùn)行。

updateScoreBoard方法在其他地方使用。每次發(fā)生更改時(shí)更新列表是沒有意義的，因?yàn)橐晥D無論如何都是不活動(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)容很重要。一開始，我?guī)缀醮鎯?chǔ)了一切：當(dāng)前活動(dòng)視圖、游戲設(shè)置、分?jǐn)?shù)、懸停效果、用戶的呼吸模式等等。

雖然這可能與一個(gè)應(yīng)用程序相關(guān)，但與另一個(gè)應(yīng)用程序無關(guān)。存儲(chǔ)當(dāng)前視圖并在重新加載時(shí)繼續(xù)在完全相同的位置可能很好，但在我的情況下，這感覺像是糟糕的用戶體驗(yàn)，而且比有用的更煩人。您也不想存儲(chǔ)菜單或模態(tài)的切換，對(duì)吧？用戶為什么要回到那個(gè)特定狀態(tài)？在較大的Web應(yīng)用程序中，這可能是有意義的。但在我的小型移動(dòng)游戲重點(diǎn)游戲中，回到設(shè)置屏幕只是因?yàn)槲覐哪抢镫x開，這相當(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)槲乙婚_始認(rèn)為我必須做不同的事情，但我最終發(fā)現(xiàn)這沒有必要。

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

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

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

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

加載播放器……關(guān)于無React的Redux的常見問題解答（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)及其生命周期方法來自動(dòng)處理狀態(tài)更改時(shí)組件的更新。如果沒有React，您需要手動(dòng)訂閱存儲(chǔ)并在狀態(tài)更改時(shí)處理UI的更新。

如何在沒有React的情況下處理Redux中的異步操作？

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

我可以在沒有React的情況下使用Redux DevTools嗎？

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

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

如果沒有React及其connect函數(shù)，您需要手動(dòng)訂閱Redux存儲(chǔ)并在狀態(tài)更改時(shí)更新UI組件。您可以使用store.subscribe方法訂閱存儲(chǔ)，該方法采用一個(gè)偵聽器函數(shù)，該函數(shù)將在每次調(diào)度操作時(shí)被調(diào)用。在此偵聽器函數(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í)處理組件的更新。

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

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

如何在沒有React的情況下處理Redux中的副作用？

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

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

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