Ember-Redux-Actions 是一款非常实用的 npm 包，它为 Ember 应用程序提供了 Redux 状态管理库的支持。如果您正在开发基于 Ember 框架的 Web 应用程序，那么使用 Ember-Redux-Actions 将使您的应用程序更具可维护性和可扩展性。在本教程中，我们将介绍如何安装和使用 Ember-Redux-Actions。
安装
我们可以使用 npm 进行安装：
npm install ember-redux-actions
使用
使用 Ember-Redux-Actions，我们需要进行以下设置：
将 Redux 库集成到 Ember 应用程序中
首先，我们需要将 Redux 库集成到 Ember 应用程序中。我们可以使用 ember-redux 插件轻松完成此操作。使用以下命令安装 ember-redux 和其它必要的依赖项：
npm install --save-dev ember-redux redux
创建一个 Redux Store
我们需要创建一个 Redux Store，该 Store 将用于存储整个应用程序的所有状态。我们可以使用以下代码段创建一个简单的 Store：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ----------- ---- ------------------- ----- ----- - ------------ ------------ ----------------------------------- -- ------------------------------------- -- ------ ------- ------
使用 RootStateMixin
我们需要在 Ember 组件中使用 RootStateMixin，这个 Mixin 会让我们跨 Redux Store 访问整个应用程序状态。我们可以使用以下代码段将 RootStateMixin 引入到每个 Ember 组件中：
import { RootStateMixin } from 'ember-redux-actions/mixins/component';
export default Ember.Component.extend(RootStateMixin, {
// component code ...
});创建 Action Types
我们需要创建一个包含所有 Action Types 的常量文件。这有助于确保我们在应用程序中的所有地方都使用相同的 Action Types。我们可以使用以下代码片段定义 Action Types：
export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO'; export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
创建 Action Creators
我们需要创建一组函数来创建 Redux Actions。我们可以使用以下代码段定义 Action Creators：
-- -------------------- ---- -------
------ - --------- ------------ --------------------- - ---- ----------------
--- ---------- - --
------ -------- ------------- -
------ -
----- ---------
--- -------------
----
--
-
------ -------- -------------- -
------ -
----- ------------
--
--
-
------ -------- --------------------------- -
------ -
----- ----------------------
------
--
-创建 Reducers
我们需要创建一组 Reducers，负责根据 Actions 更新应用程序状态。我们可以使用以下代码段定义 Reducers：
-- -------------------- ---- -------
------ - --------- ------------ --------------------- - ---- -------------------------
------ - ----------------- - ---- ---------------------
----- ------------ - -
----------------- ---------------------------
------ --
--
-------- ----------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
--- ----------
----- ------------
---------- -----
-
-
--
---- ------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
--
---- ----------------------
------ -
---------
----------------- -------------
--
--------
------ ------
-
-
------ ------- ------在 Ember 组件中使用 Actions 和 Selectors
我们可以在 Ember 组件中使用 Action Creators 和 Selectors 来派发 Actions 和选择部分状态。我们可以使用以下代码段在组件中派发 Action：
-- -------------------- ---- -------
------ - ------- - ---- ----------------------
------ - ------- - ---- ---------------------
----- ------- - ------------------------
-------- -
--------------- -
-----------------------
----- ----- - ---------------------------
------------------------------------
--------------
-
-
---
------ ------- ------------- -- ---------------我们可以使用以下代码片段选择部分状态：
-- -------------------- ---- -------
------ - ------- - ---- ----------------------
------ - --------------- - ---- -------------------------
----- --------------- - ------------------------
------ ----------------- -- -
------ ---------------------------------- ------------------------------
--
---
------ ------- ------------- -- --
------ ------------
----------------- ----------------------
---------------------示例代码
以下是使用 Ember-Redux-Actions 的简单 Todos 应用程序的代码：
index.js
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ---------------------- ------ ----- ---- ---------------- ------ ------- ---- ----------------------- ------ ------ ---- ---------------------- ------ --------------- ---- ------------------------------- ----- --- - ------------------------ ------- ------------------------------------- ----------- ----------- ------------------- ----------- ------------ --- ----- ----------- - ----------------- ------ ----- --- ------ ------- -------------------- ------- ------------------------------------- --------- ---
store/store.js
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ----------- ---- ------------------- ----- ----- - ------------ ------------ ----------------------------------- -- ------------------------------------- -- ------ ------- ------
actions/actionTypes.js
export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO'; export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
actions/actions.js
-- -------------------- ---- -------
------ - --------- ------------ --------------------- - ---- ----------------
------ ----- ----------------- - -
--------- -----------
--------------- -----------------
------------ -------------
--
--- ---------- - --
------ -------- ------------- -
------ -
----- ---------
--- -------------
----
--
-
------ -------- -------------- -
------ -
----- ------------
--
--
-
------ -------- --------------------------- -
------ -
----- ----------------------
------
--
-reducers/todos.js
-- -------------------- ---- -------
------ - --------- ------------ --------------------- - ---- -------------------------
------ - ----------------- - ---- ---------------------
----- ------------ - -
----------------- ---------------------------
------ --
--
-------- ----------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
--- ----------
----- ------------
---------- -----
-
-
--
---- ------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
--
---- ----------------------
------ -
---------
----------------- -------------
--
--------
------ ------
-
-
------ ------- ------reducers/index.js
import { combineReducers } from 'redux';
import todos from './todos';
const rootReducer = combineReducers({
todos
});
export default rootReducer;selectors/selectors.js
-- -------------------- ---- -------
------ - -------------- - ---- -----------
------ - ----------------- - ---- ---------------------
----- ------------------- - ----- -- -----------------------
----- -------- - ----- -- ------------
------ ----- --------------- - ---------------
--------------------- ----------
------------------ ------ -- -
------ ------------------ -
---- ---------------------------------
------ -------------- -- -------------
---- ------------------------------
------ -------------- -- --------------
---- ---------------------------
--------
------ ------
-
-
--components/AddTodo.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ----------------------
------ - ------- - ---- ---------------------
----- ------- - ------------------------
-------- -
--------------- -
-----------------------
----- ----- - ---------------------------
------------------------------------
--------------
-
-
---
------ ------- ------------- -- ---------------components/Footer.js
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- ----------------------
------ - ------------------- - ---- ---------------------
------ - ----------------- - ---- ---------------------
----- ---------- - ------------------------
-------- -----
------------------ ------------------
-------------- ------------------------ ---------- -
------ ------------------ - -------- - -----
---
------ ---------- -
-------------------------------------------------------
-
---
-------------------- - -
------- --------------------------
------- -----------------
---------------------------
---------------------------------
-----------------------------
-------------
--
----- ------ - ------------------------
------- --------------------------
--- ----------------
------- ------- -- ----------
----------- ------------ ------------- ---------- ---------------- ---------
---------
-----
---
-------- ---------------------------- ------------------------------ ---------------------------------
---
------ ------- ------------- -- --
----------------- ----------------------
------------components/VisibleTodoList.js
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- ----------------------
------ - ---------- - ---- ---------------------
------ - --------------- - ---- -------------------------
----- ---- - ------------------------
-------- -----
------------------ --------------
---------- -------------------------------- ---------- -
------ -------------------------- - ----------- - -----
---
------ ---------- -
-----------------------------------------------
--
--------- --------------------------- ---------- -
------ ---------------------------------------------
--
---
-------------- - -
----- -----------------
----- ----------------------------
---------- -------------------------
-------------
--
----- --------------- - ------------------------
-------- -----
----------- ----------------- -- -
------ ---------------------------------- -------------------------------------- -- -
------ ------------- ---- ---
---
--
---
------ ------- ------------- -- --
------ ------------
----------------- ----------------------
---------------------总结
在本教程中，我们学习了如何在 Ember 应用程序中使用 Ember-Redux-Actions。通过使用 Ember-Redux-Actions，我们可以在 Ember 应用程序中轻松使用 Redux 状态管理库。希望这篇教程能够帮助您理解如何使用 Ember-Redux-Actions 以及如何为您的 Ember 应用程序实现更可维护和可扩展的状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecb93