简介
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
