引言
aurelia-redux-connect 是一个基于 Aurelia 的 Redux 状态管理库。它通过将 Aurelia 组件与 Redux 连接，轻松实现全局数据的管理与流动。 它是基于 reduxsauce 库的 aurelia-redux-decorator 的一个扩展，提供了更便捷的使用方式。
在本文中，我们将逐步介绍如何使用 aurelia-redux-connect 在 Aurelia 应用程序中实现全局数据状态管理。
安装
首先，我们需要先安装 aurelia-redux-connect 库，在你的项目文件夹中运行以下命令：
npm install aurelia-redux-connect --save
基础用法
aurelia-redux-connect 的基本工作原理是通过注入一个 redux store 对象，在组件中监听 store 对象的变化，并且将组件与该 store 对象连接。
- 在 app-state.ts 中创建 redux 的 store:
-- -------------------- ---- -------
-- ----------------
------ - ----------- - ---- --------
----- ------------ - - -------- - --
-------- -------------------- - ------------- ------- ---- -
------ ------------- -
---- ------------
------ - -------- ------------- - - --
---- ------------
------ - -------- ------------- - - --
--------
------ ------
-
-
------ ----- ----- - ----------------------------- 在 app.ts 中注册 aurelia-redux-connect:
-- -------------------- ---- -------
-- ----------
------ - -------- - ---- --------------
------ - -------- ------ - ---- --------------------
------ - ----- - ---- --------------
------ - ------------------- - ---- ------------------------
----------------------------
------ ----- --- -
------------------- -------------------- -------------------- --
----- ----------- -
-- ---
--------------------------------------------------------------------- -------
-- ---
-
-这里我们将 store 对象注册到 aurelia-redux-connect 的插件中，然后在组件中即可注入 AureliaReduxConnect.
- 在组件中使用采用装饰器模式连接 redux store:
-- -------------------- ---- -------
-- -------------------
------ - -------------------- --------- - ---- ------------------------
------ - ----- - ---- --------------
-----------------
------ ----- ----------- -
------- - --
------------------- -------------------- -------------------- --
---------- -
-- --------- ----- -------
------------------------------------- ------- -- -
------------ - --------------
---
-
----------- -
---------------- ----- ----------- --
-
----------- -
---------------- ----- ----------- --
-
-在这个组件中，我们使用了 @connectTo 装饰器将组件链接到我们先前创建的 store 对象。方法 attached() 中我们通过 AureliaReduxConnect 对象监听 store 的变化，更新组件的状态。
总结
在本文中，我们介绍了如何使用 aurelia-redux-connect 库在 Aurelia 应用程序中实现全局数据的状态管理。通过连接 Redux 的 store 对象，aurelia-redux-connect 让我们可以轻松地在组件中获取全局状态，并及时地响应数据变化。
这样，我们可以在 Aurelia 应用程序中构建更加健壮的 UI 组件，并且更好地保持数据状态的一致性。
参考代码
如果你想更深入地学习 aurelia-redux-connect 的用法，请查看以下示例代码：
https://github.com/vulekamali/aurelia-redux-connect-tutorial-app
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d581e8991b448e495f