介绍
aurelia-redux-immutable 是一个用于在Aurelia中处理redux-immutable（一个使用Immutable.js的Redux绑定）的组件。它提供类似React-Redux库的api，同时也封装了 Immutable.js 的绑定和连接。
在本教程中，我们将一步步学习如何使用 aurelia-redux-immutable，通过简单的示例来达到深入理解其核心概念和指导意义。
前置条件
- 已创建好 Aurelia Cli 项目
- 已配置好 TypeScript
安装
通过 npm 安装 aurelia-redux-immutable
npm install aurelia-redux-immutable --save
然后，安装 redux-immutable 和 Immutable.js:
npm install redux-immutable immutable --save
使用
添加插件
在Aurelia的主文件(app.ts)中，添加 aurelia-redux-immutable。我们还需要添加一个 Redux 的 store 对象，以便在组件中使用。
-- -------------------- ---- -------
------ - ------- - ---- --------------------
------ - -------- - ---- --------------
------ -------------- ---- -------------------------
------ -------- ------------------ -------- -
-----------
------------------------
------------------------------------------------------- -------- ---- -- -
---------------- - ------
--------------------------- - -----
---
----- ----- - -----------------
------------------------------------------------ -------
----------------------- -- ---------------------------------------------
-创建 reducer
创建 Reducer 的方式与在 React 中通常相同。我们使用 Immutable.js 来更新状态，aurelia-redux-immutable 会使用 Angular 的 ChangeDetectionRef 自动检测状态变化并更新视图。
-- -------------------- ---- -------
------ - --- - ---- ------------
--------- -------- ------- ----------- ---- -
----- -------
-
----- -------------- -------- - -----
----- ---
---
----- --------- - ------ - -------------- ------- ----- -------- -- -
------ ------------- -
---- --------------
------ ----------------- ----------------------
--------
------ ------
-
--
------ ------- ----------创建 store
我们使用 redux 的 createImmutableStore 函数创建 Redux store。在这个案例中，我们使用 combineReducers 函数来组合 reducers。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------------- - ---- ------------------
------ --------- ---- --------------
----- ----------- - -----------------
----------
---
----- -------------- - -- -- -
------ -------------------------
--
------ ------- ---------------使用 connect
在 Aurelia 项目中使用 Aurelia patterns 和 typescript 来创建组件。使用 connect 来将组件连接到 Redux store。
-- -------------------- ---- -------
------ - ------- - ---- --------------------------
----- ------------ -
----- ------ - ---
------------------- ------ ---- --
---------- -
--------------------- ----- -------------- -------- - ------ --------- - ---
-
-
----- --------------- - ------- ---- -- --
----- ------------------------- ---------
---
----- ------------------- - ---------------------------------------
------ - ------------------- --示例代码
app.ts
-- -------------------- ---- -------
------ - ------- - ---- --------------------
------ - -------- - ---- --------------
------ -------------- ---- -------------------------
------ - ------------------- - ---- ------------------
------ -------- ------------------ -------- -
-----------
------------------------
------------------------------------------------------- -------- ---- -- -
---------------- - ------
--------------------------- - -----
---
----- ----- - -----------------
------------------------------------------------ -------
----------------------- -- ---------------------------------------------
-
store -> myReducer.ts
-- -------------------- ---- -------
------ - --- - ---- ------------
--------- -------- ------- ----------- ---- -
----- -------
-
----- -------------- -------- - -----
----- ---
---
----- --------- - ------ - -------------- ------- ----- -------- -- -
------ ------------- -
---- --------------
------ ----------------- ----------------------
--------
------ ------
-
--
------ ------- ----------
store -> index.ts
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------------- - ---- ------------------
------ --------- ---- --------------
----- ----------- - -----------------
----------
---
----- -------------- - -- -- -
------ -------------------------
--
------ ------- ---------------app.component.ts
-- -------------------- ---- -------
------ - ------- - ---- --------------------------
----- ------------ -
----- ------ - ---
------------------- ------ ---- --
---------- -
--------------------- ----- -------------- -------- - ------ --------- - ---
-
-
----- --------------- - ------- ---- -- --
----- ------------------------- ---------
---
----- ------------------- - ---------------------------------------
------ - ------------------- --app.html
-- -------------------- ---- -------
----------
---------
----------- ----- --------- ------------
-----
------------ --------
------ ----------- ----------------- -----------------------------
------
-----
--------------- --------
--------------------
------
----------
-----------
-------- ---------------------------------
-------- -----------------------------------------------结论
至此，我们通过一个Aurelia和Redux的示例，学习了如何在 Aurelia 中使用 Redux。我们使用 aurelia-redux-immutable 组件，提供了类似于 react-redux 的 API，并有效地连接了 Immutable.js 与 Redux。在实践中，我们可以通过 Redux 常规API（createStore，combineReducers和其他Middleware）来增强、操作、连接和处理我们的数据。这种类似于React的方法给予使用Aurelia同样的强大功能，并提供了一些实际开发中的参考思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac61