前言
经过数年快速发展，JavaScript已成为最重要的编程语言之一。并且，伴随着React和Redux的普及，前端开发日益成为一个后端开发工程师们不可避免的一部分。一个强大的npm包——ember-redux-reselect随之产生。本文将详细介绍这个npm包的使用，包括其深度和指导意义，并提供示例代码供读者学习。
什么是ember-redux-reselect？
ember-redux-reselect是一个可重复使用的javascript函数的库。它是 reselect 库的一个小型封装，专门为Ember项目中的Redux集成开发而设计。 reselect 库用于计算派生数据，减少重复的数据计算，优化 React 应用的时间复杂度。
选择使用 ember-redux-reselect 优化 Redux 中的数据计算，能够更好地管理数据状态的变化并减少跟随依赖性的重复计算，从而提高React应用的效率。
使用说明
使用 ember-redux-reselect扩展 Redux 非常方便。这些是使用 ember-redux-reselect 进行计算派生数据的步骤：
- 首先，安装
ember-redux-reselect的依赖：
npm install --save reselect ember-cli-reselect
- 在项目的特定位置，引入
createSelector，如下所示：
import { createSelector } from 'ember-redux-reselect';- 在应用程序的
Redux中创建一个selector函数：
const todosSelector = state => state.todos; const completedTodosSelector = createSelector( todosSelector, todos => todos.filter(todo => todo.completed) );
在上面的代码中， completedTodosSelector 是一个派生数据计算函数，它接受 todosSelector 作为其第一个参数。todosSelector 是一个返回 Redux 状态对象中todos的数组的函数。
- 您可以在
Reduxreducers 中使用completedTodosSelector作为内联派生数据计算：
-- -------------------- ---- -------
-------- ------------------- ------- -
------ ------------- -
---- -----------
------ ----------------- ------ ------- ---------------------
----- ------------
---------- -----
------
---- --------------
------ ----------------- ------ -
------ ---------------------- ------ -- -
-- ------ --- ------------- -
------ ----------------- ----- -
---------- ---------------
---
-
------ -----
--
---
--------
------ ------
-
-
-------- ------------- - - ------ -- -- ------- -
------ ------------- -
---- -----------
---- --------------
------ ----------------- ------ -
--------------- -----------------------------
---
--------
------ ------
-
-在上面的代码中， completedTodosSelector(state) 计算存储在 Redux 状态对象中的 todos数组，并将结果作为 completedTodos-selector 保存。
示例代码
这是一个简单示例，它向 Redux 存储 todos对象并将其传递给 completedTodosSelector，返回该数组中所有已完成的项：
-- -------------------- ---- -------
------ - -------------- - ---- -----------------------
----- ------------- - ----- -- ------------
----- ---------------------- - ---------------
--------------
----- -- ----------------- -- ---------------
--
----- ------------ - -
------ -
-
----- ------ -------
---------- -----
--
-
----- ------ -------
---------- ----
--
-
----- ------ -------
---------- ----
--
-
----- ------ ------ -------------
---------- -----
--
-
----- ------- -------------
---------- -----
-
-
--
----- ----- - -------------- --------------
------------------------------------------- 在这里，completedTodosSelector 接受 todosSelector的结果并将其作为输入。 todosSelector 接受状态对象 state 并返回todos数组。
上述示例的代码，将输出Redux状态对象中所有已经完成的todos数组：
-- -------------------- ---- -------
-
-
----- ------ -------
---------- ----
--
-
----- ------ -------
---------- ----
-
-总结
ember-redux-reselect 是一个有用的npm包，旨在为 Ember 项目中的 Redux 集成开发进行数据状态管理。它使用 reselect 库来计算派生数据和减少重复计算，并通过优化React 应用程序来提高效率。在应用程序中，通过创建 selector 函数和内联派生数据, ember-redux-reselect 可以使计算裸数据更加容易，更容易维护和管理。大家可以尝试使用这个npm包来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecbb9