介绍
在前端开发中，Redux 已经成为了用来管理状态的首选框架之一。而 @basaltjs/redux-es6 是一个基于 Redux 的 ES6 绑定工具。它提供了一些非常有用的特性，例如：自动化装箱/拆箱，注释/类型检查以及自动错误处理等。在这篇文章中，我们将会深入了解 @basaltjs/redux-es6 如何使用，并且通过实例化一些简单的代码来帮助您更好地掌握这个框架。
安装
在使用 @basaltjs/redux-es6 之前，您需要先安装以下依赖：
- NPM
- Redux
安装命令：
npm install @basaltjs/redux-es6 redux
示例
创建存储
在使用 Redux 时，要创建一个存储，您需要导入一些类。@basaltjs/redux-es6 使用 connect() 函数来生成包装器组件，并将其连接到 Redux 存储。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------- ------- - ---- ----------------------
-- -----
----- ------------ - ------- ---
-- -- ----- -------
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
-- ----
----- ----- - ---------------------
-- ----
----- -------------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
------------ ------------
------- ------------------------------
------- ------------------------------
------
--
-
-
-- -------
----- --------------- - ------- -- -
------ -
------ -----------
--
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- - --------------- -------------- --
---------- -- -- - --------------- -------------- -
--
-
-- -------
----- ------- - ------------------------ ------------------------------------
-- ----
-------------
--------- --------------
-------- --
------------
------------------------------------
--自动注释（Action）
每当 action 使用 createReducer() 函数时，注释都会自动应用于该操作，并且可以在开发工具中进行查看。
-- -------------------- ---- -------
------ ------------- ---- ------------------------------
-- -----
---
- -- --------- --
-
- ------ -------- ------ - --
--
------ -------- ----------------- -
------ -
----- ------------
------
--
-
-- -- -------
------ ------- ---------------
-- -- --------- --
---------------- - ------ -- -
------ - ------ ----------- - ------ --
--
-- -- --------- --
---------------- -
------ - ------ ----------- - - --
-
-- --------------错误处理
如果您需要在处理错误时显示相应的 UI，那么使用 errorReducer() 可以轻松实现。@basaltjs/redux-es6 自动创建一个新的错误对象，并通过使用 action.payload 将其传递给 reducer 函数。
-- -------------------- ---- -------
------ - ------- - ---- ----------------------
------ ------------ ---- -----------------------------------
----- --------------- - ------- -- -
------ -
------ ------------
------ -----------
--
--
-- ----------
----- ------------------ - ---------- -- -
------ -
---------- -------- -- -
--- -
----------------------------
- ----- ------- -
--------------------------------------
-
--
---------- -- -- -
----------------------
-
--
--
----- ------- - --------
----------------
------------------
------------------总结
@basaltjs/redux-es6 是一个非常强大的工具，它可以简化复杂的 Redux 代码，并增加了许多有用的特性。在本文中，我们深入了解了 @basaltjs/redux-es6 如何使用，并通过实例化一些简单的代码来帮助您更好地掌握这个框架。期望这篇文章对您有所帮助，能够引导您更深入地研究 Redux 和基于 Redux 的框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd181e8991b448dd5df