在现代的 Web 开发中，前端框架和国际化、离线功能等都是必备的技术。其中，框架的选择和使用非常关键，越来越多的 Web 开发者倾向于使用 React 和 Redux 这样的 Web 应用程序框架。本文将介绍一款 npm 包，即 ember-redux-offline-shim，在 Ember 应用中使用 Redux 状态管理和 offline-first 架构。
Ember 应用中使用 Redux
Ember 是一款另类的 Web 开发框架，它以传统的 MVC（Model-View-Controller）架构为基础。要在 Ember 中使用 Redux，可以使用 ember-redux 这款 Ember 封装 Redux 的 npm 包。
首先，需要在项目中安装和配置 ember-redux 包。此处省略步骤。
使用 ember-redux-offline-shim
ember-redux-offline-shim 是另一款 npm 包，它可以帮助我们快速地集成 Redux 和 offline-first 架构。我们可以通过以下命令来安装：
npm install ember-redux-offline-shim --save
安装完成后，需要在 ember-cli-build.js 文件中引入 shim 文件：
app.import('vendor/ember-redux-offline-shim.js');此外，还需在 config/environment.js 文件中将 ReduxOffline 的配置信息添加到系统配置中：
var ENV = {
// ...
reduxOffline: {
persistenceBlacklist: []
},
// ...
};现在，我们就可以在 Ember 应用中使用 Redux 和 Redux Offline 插件了。下面，我们将介绍一些具体操作。
Redux 状态管理
安装好必要的包后，我们可以直接使用 Redux 提供的 store 和 reducer。具体操作请参考 Redux 的官方文档。
离线缓存
Redux Offline 可以帮助我们在离线状态下保持应用的可用性。我们需要做的是在配置文件中添加必要的配置信息，然后在 reducer 中添加离线相关的 action。下面是离线缓存的一个简单示例。我们先定义一个 action creator：
-- -------------------- ---- -------
------ -------- -------------------- -
------ -
----- ---------------
-------- -
------- ----------------
----- ----------
-------------- -----------------------
-------------- -----------------------
--
--
-我们可以看到，这里使用了 offline object 来定义该 action 的离线行为。effect 属性指定了触发该 action 的方法，该方法将被尝试执行。如果该方法执行失败，则会自动添加到一个队列中，等待网络连接恢复后执行。如果该方法执行成功，则自动触发 successAction。此外，failureAction 也将被自动触发。
在 reducer 中，我们可以处理离线 action：
-- -------------------- ---- -------
-------- --------------------- - --- ------- -
------ ------------- -
-- ---
---- ---------------
---- -----------------------
------ ---------- - --- ------- ----------------- ---
---- ---------------------
------ ---------- - --- ------- ------------------------------ ---
-- ---
--------
------ ------
-
-这里，我们处理了 POST_COMMENT 和 POST_COMMENT_SUCCESS action，以及重试离线缓存的 action。通过添加以上处理，我们就可以在离线状态下继续使用应用，待连接恢复后，已经离线的 action 会被自动执行。
总结
本文介绍了如何在 Ember 应用中使用 Redux 和 Redux Offline 插件。通过使用 ember-redux-offline-shim，我们可以更加方便地构建 offline-first 应用，为应用的可用性提供保障。希望本文能够对读者有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005593981e8991b448d6a78