没有反应的redux-js教程-PHP中文网

React是由Facebook创建的用于构建用户界面的基于组件的开源库。虽然React只是一个视图层（不是像Angular或Ember这样的完整框架），但Redux管理应用程序的状态。它充当可预测的状态容器，其中整个状态存储在一个单一的对象树中，并且只能通过发出所谓的action来更改。如果您完全不了解这个主题，我建议您阅读这篇文章。

对于本文的其余部分，不需要成为Redux专家，但至少对它的概念有一定的了解会有所帮助。

无React的Redux——从零开始的应用程序

Redux的优点在于它迫使您提前思考并尽早了解应用程序的设计。您开始定义实际应该存储什么，哪些数据可以并且应该更改，以及哪些组件可以访问存储。但由于Redux只关注状态，我发现自己有点困惑如何构建和连接应用程序的其余部分。React在引导您完成所有步骤方面做得很好，但如果没有它，就需要我弄清楚什么方法最有效。

所讨论的应用程序是一个针对移动设备优先的俄罗斯方块克隆，它有几个不同的视图。实际的游戏逻辑在Redux中完成，而离线功能由localStorage和自定义视图处理提供。存储库可以在GitHub上找到，尽管该应用程序仍在积极开发中，并且我是在开发过程中撰写这篇文章的。

定义应用程序架构

我决定采用在Redux和React项目中常见的文件夹结构。这是一个逻辑结构，适用于许多不同的设置。这个主题有很多变体，大多数项目都略有不同，但整体结构相同。

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>

登录后复制

我的标记被分隔到另一个目录中，最终由单个index.html文件呈现。该结构类似于scripts/，以便在整个代码库中保持一致的架构。

src/markup/

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

登录后复制

管理和访问存储

要访问存储，需要创建一次并将其传递给应用程序的所有实例。大多数框架都使用某种依赖注入容器，因此我们作为框架的用户不必自己想出解决方案。但是，当我使用自己的解决方案时，如何才能让它对我的所有组件都可用呢？

我的第一次迭代失败了。我不知道为什么我认为这是一个好主意，但我将存储放在它自己的模块（scripts/store/index.js）中，然后可以由应用程序的其他部分导入。我最终后悔了，并很快处理了循环依赖。问题是，当组件尝试访问存储时，存储没有正确初始化。我制作了一个图表来演示我正在处理的依赖关系流程：

Redux without React

应用程序入口点正在初始化所有组件，然后通过直接或通过辅助函数（此处称为connect）内部使用存储。但是，由于存储不是显式创建的，而只是在其自身模块中的副作用，组件最终在存储创建之前就使用了存储。无法控制组件或辅助函数第一次调用存储的时间。这很混乱。

存储模块如下所示：

scripts/store/index.js (☓ bad)

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

const store = createStore(reducers)

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

登录后复制

如上所述，存储是作为副作用创建的，然后导出。辅助函数也需要存储。

scripts/store/connect.js (☓ bad)

import store from './'

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

登录后复制

这正是我的组件最终相互递归的时刻。辅助函数需要存储才能运行，并且同时从存储初始化文件中导出，以便使它们可以访问应用程序的其他部分。您看到这听起来有多乱吗？

解决方案

现在看来很明显的事情，我花了一段时间才理解。我通过将初始化移动到我的应用程序入口点（scripts/index.js），并将其传递给所有必需的组件来解决此问题。

同样，这与React实际使存储可访问的方式非常相似（查看源代码）。它们一起工作得如此之好是有原因的，为什么不学习它的概念呢？

Redux without React

应用程序入口点首先创建存储，然后将其传递给所有组件。然后，组件可以连接到存储并调度操作、订阅更改或获取特定数据。

让我们来看一下更改：

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>

登录后复制

我保留了该模块，但改为了导出一个名为configureStore的函数，该函数在代码库中的其他地方创建存储。请注意，这只是基本概念；我还使用了Redux DevTools扩展程序并通过localStorage加载持久化状态。

scripts/store/connect.js (✓ good)

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

登录后复制

connect辅助函数基本上没有改变，但现在需要将存储作为参数传递。起初我犹豫是否要使用此解决方案，因为我认为“那么辅助函数有什么意义呢？”。现在我认为它们很好而且足够高级，使一切更易于阅读。

scripts/index.js

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

const store = createStore(reducers)

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

登录后复制

这是应用程序入口点。存储被创建，并传递给所有组件。PageControls为特定操作按钮添加全局事件侦听器，TetrisGame是实际的游戏组件。在将存储移到这里之前，它看起来基本相同，但没有将存储分别传递给所有模块。如前所述，组件可以通过我失败的连接方法访问存储。

组件

我决定使用两种组件：表现层和容器组件。表现层组件除了纯DOM处理之外什么也不做；它们不知道存储。另一方面，容器组件可以调度操作或订阅更改。

Dan Abramov已经为React组件写了一篇很棒的文章，但这套方法也可以应用于任何其他组件架构。

不过，对我来说也有例外。有时组件非常小，只做一件事情。我不想将它们分成上述模式之一，所以我决定将它们混合使用。如果组件增长并获得更多逻辑，我将对其进行分离。

scripts/components/pageControls.js

import store from './'

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

登录后复制

上面的示例就是其中一个组件。它有一个元素列表（在本例中是所有具有data-action属性的元素），并根据属性内容在单击时调度操作。仅此而已。然后，其他模块可能会侦听存储中的更改并相应地更新自身。如前所述，如果组件还进行了DOM更新，我将对其进行分离。

现在，让我向您展示这两种组件类型的清晰分离。

更新DOM

在我开始该项目时，我遇到的一个更大的问题是如何实际更新DOM。React使用称为虚拟DOM的DOM的快速内存中表示来最大限度地减少DOM更新。

我实际上是在考虑做同样的事情，如果我的应用程序变得更大且DOM更繁重，我可能会切换到虚拟DOM，但就目前而言，我进行经典DOM操作，这与Redux配合得很好。

基本流程如下：

初始化容器组件的新实例并传递存储以供内部使用
组件订阅存储中的更改
并使用不同的表现层组件在DOM中呈现更新

注意：对于JavaScript中与DOM相关的任何内容，我都是$符号前缀的粉丝。正如您可能猜到的那样，它取自jQuery的$。因此，纯表现层组件文件名以美元符号为前缀。

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>

登录后复制

这里没有什么花哨的东西。导入、创建和初始化容器组件ScoreObserver。它究竟做了什么？它更新所有与分数相关的视图元素：高分列表和游戏期间的当前分数信息。

scripts/components/scoreObserver/index.js

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

登录后复制

请记住，这是一个简单的组件；其他组件可能具有更复杂的逻辑和需要处理的事情。这里发生了什么？ScoreObserver组件保存对存储的内部引用，并创建新实例的两个表现层组件以供以后使用。init方法订阅存储更新，并在每次存储更改时更新$label组件——但前提是游戏实际上正在运行。

updateScoreBoard方法在其他地方使用。每次发生更改时更新列表是没有意义的，因为视图无论如何都是不活动的。还有一个路由组件，它在每次视图更改时更新或停用不同的组件。它的API大致如下所示：

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

const store = createStore(reducers)

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

登录后复制

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

scripts/components/scoreObserver/$board.js

import store from './'

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

登录后复制

同样，这是一个基本示例和一个基本组件。updateBoard()方法获取一个数组，对其进行迭代，并将内容插入到分数列表中。

scripts/components/scoreObserver/$label.js

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

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

登录后复制

此组件与上面的ScoreBoard几乎完全相同，但只更新单个元素。

其他错误和建议

另一个重要点是实现用例驱动的存储。我认为只存储对应用程序必不可少的内容很重要。一开始，我几乎存储了一切：当前活动视图、游戏设置、分数、悬停效果、用户的呼吸模式等等。

虽然这可能与一个应用程序相关，但与另一个应用程序无关。存储当前视图并在重新加载时继续在完全相同的位置可能很好，但在我的情况下，这感觉像是糟糕的用户体验，而且比有用的更烦人。您也不想存储菜单或模态的切换，对吧？用户为什么要回到那个特定状态？在较大的Web应用程序中，这可能是有意义的。但在我的小型移动游戏重点游戏中，回到设置屏幕只是因为我从那里离开，这相当烦人。

结论

我已经使用和不使用React完成了Redux项目，我的主要收获是，应用程序设计中的巨大差异并非必要。React中使用的大多数方法实际上都可以适应任何其他视图处理设置。我花了一段时间才意识到这一点，因为我一开始认为我必须做不同的事情，但我最终发现这没有必要。

然而，不同的是您初始化模块、存储的方式，以及组件对整体应用程序状态的了解程度。概念保持不变，但实现和代码量完全适合您的需求。

Redux是一个很棒的工具，它有助于以更周到的方式构建您的应用程序。单独使用，没有任何视图库，一开始可能会非常棘手，但一旦您克服了最初的困惑，就没有任何东西可以阻止您了。

您如何看待我的方法？您是否独自使用Redux和不同的视图处理设置？我很乐意收到您的反馈并在评论中讨论它。

如果您想了解更多关于Redux的信息，请查看我们的课程《重写和测试Redux以解决设计问题》迷你课程。在本课程中，您将构建一个Redux应用程序，该应用程序通过websocket连接接收按主题组织的推文。为了让您了解即将发生的事情，请查看下面的免费课程。

加载播放器……关于无React的Redux的常见问题解答（FAQ）

使用Redux与React和不使用React的主要区别是什么？

Redux是一个适用于JavaScript应用程序的可预测状态容器，可以与任何UI层一起使用。使用Redux与React和不使用React之间的主要区别在于UI层与Redux存储交互的方式。当与React一起使用时，Redux可以利用React的基于组件的架构及其生命周期方法来自动处理状态更改时组件的更新。如果没有React，您需要手动订阅存储并在状态更改时处理UI的更新。

如何在没有React的情况下处理Redux中的异步操作？

Redux中的异步操作通常使用Redux Thunk或Redux Saga等中间件来处理。这些中间件允许您调度函数（thunk）或更复杂的异步操作（saga），而不是普通的对象。即使没有React，您仍然可以在Redux存储中使用这些中间件。您只需要在使用Redux的applyMiddleware函数创建存储时应用中间件即可。

我可以在没有React的情况下使用Redux DevTools吗？

是的，Redux DevTools不依赖于React，可以与任何使用Redux的UI层一起使用。您可以通过在创建Redux存储时将其添加为中间件来将Redux DevTools集成到您的应用程序中。这将允许您实时检查应用程序的状态和操作，即使没有React。

如何在我的UI组件连接到Redux存储而无需React？

如果没有React及其connect函数，您需要手动订阅Redux存储并在状态更改时更新UI组件。您可以使用store.subscribe方法订阅存储，该方法采用一个侦听器函数，该函数将在每次调度操作时被调用。在此侦听器函数中，您可以使用store.getState获取存储的当前状态并相应地更新UI组件。