简介
Ember-Redux-Helpers 是一个优秀的 npm 包，能够帮助你更好地使用 Ember.js 与 Redux 这两个流行的前端技术。本文将介绍如何使用 Ember-Redux-Helpers，让你更加高效和舒适地开发前端应用。
安装
要使用 Ember-Redux-Helpers，首先必须在项目中安装它。使用以下命令可完成安装：
npm install ember-redux-helpers --save-dev
安装完成之后，你可以在你的代码中导入它：
import { computed, connect } from 'ember-redux-helpers';computed 函数
computed 函数是 Ember-Redux-Helpers 包中最重要的函数之一，它可以让你更好地管理应用程序的状态。通过 computed 函数，你可以创建一个基于 Redux store 的计算属性，它将根据 store 中的状态自动更新。
假设你有一个 Redux store，存储了当前登录用户的信息，代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
----- ----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
---------
----- --------------
--
--------
------ ------
-
-
------ ----- ----- - ---------------------你可以使用 computed 函数来创建一个计算属性，它将返回当前用户的用户名：
-- -------------------- ---- -------
------ - -------- - ---- ----------------------
------ - ------- - ---- --------------
------ - --------- - ---- -------------------
----- ------------- - ------------------
--------- ---------------------- ---------- -
------ --------------------------------
--
---
-------- ---------------------- -
------ -
------ -----
--
-
------ ------- ----------------------------------------在上面的代码里，我们定义了一个计算属性 username，它使用了 computed 函数。这个计算属性依赖于 store 中的 user，每次 user 被更新时，计算属性都会重新计算它的值。我们将这个组件与 store 进行连接，以访问 store 中的状态。
connect 函数
connect 函数是另一个非常重要的函数，它可以将 Redux store 中的状态映射到你的组件中。你可以使用 connect 函数将你的组件和 store 连接起来，以便可以访问 store 中的数据。
connect 函数的使用方法很简单，你只需要将 connect 函数作为你的组件类的最后一个导出即可：
-- -------------------- ---- -------
------ - ------- - ---- ----------------------
------ - --------- - ---- -------------------
----- ------------- - ------------------
-- ---
---
-------- ---------------------- -
------ -
------ -----
--
-
------ ------- ----------------------------------------在上面的代码中，我们将 mapStateToProps 函数传递给 connect 函数，它将负责将 Redux store 中的 state 映射到组件的 props 中。
示例
下面是一个完整的示例，它将使用 computed 和 connect 函数创建一个展示用户信息的组件：
-- -------------------- ---- -------
------ - --------- ------- - ---- ----------------------
------ - --------- - ---- -------------------
----- ------------- - ------------------
--------- ---------------------- ---------- -
------ --------------------------------
---
----- ---------------------- ---------- -
------ ----------------------------
--
---
-------- ---------------------- -
------ -
------ -----
--
-
------ ------- ----------------------------------------在这个示例中，我们定义了两个计算属性，它们依赖于 store 中的 user，每当 user 被更新时，它们都会自动更新。我们还将这个组件与 store 进行了连接，以便可以访问 store 中的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecbb2