简介
reeasy是一个基于redux的轻量级状态管理库，提供了一些工具函数和API，方便用户进行状态管理。它与redux不同之处在于，它的状态管理更加简单，代码更加精简。因此，reeasy在很多前端项目中得到了广泛的应用。
安装
使用npm进行安装：
--- ------- ------
使用
在使用reeasy前，我们需要先创建store：
------ - ----------- - ---- ---------
----- ----- - -------------
------ -
------ -
--
-------- -
------------ -- ----- -- -- ----------- - -
--
---------- -
---------- -- ----- -- -- -
--------------
-
-
---上述代码中，我们定义了state、getters、mutations三个部分。其中：
- state表示应用的状态数据；
- getters表示可以对状态进行读取的方法；
- mutations表示可以对状态进行修改的方法。
接下来，我们可以通过react组件使用store：
------ ----- ---- --------
------ - -------- - ---- ---------
-------- --------- -
----- - ------ ------ - - ----------
------ --------
------------ -------------
---
------ -
-----
----------- -------------------
----------- ------ -------------------------
------- ----------- -- ---------------------------------------
------
--
-上述代码中，我们通过useStore获取store的数据，并在组件中使用了state和commit方法。
原理
reeasy的实现原理是基于redux和官方推荐的immer库。
我们知道，redux中getState和dispatch是分别用来获取和分发状态的。
reeasy对getState和dispatch进行了封装，将getState和dispatch包装成proxy对象，使得用户在读写数据时可以像操作普通的js对象一样。这样，就避免了像redux那样需要写大量的逻辑代码。
例如，当我们使用commit方法时，那么实际上调用的是dispatch方法：
------------ -------- - ---------------- ----- ------- --- -
而_dispatch方法中，又调用了_reducer方法进行状态的更新：
----------------- - ----------- - -------------------------- -------- ------------------- -
我们可以看到，_reducer方法使用immer库生成一个新的state，然后再重新设置给state。
示例
下面是一个简单的示例，介绍了reeasy的用法：
------ - ----------- - ---- ---------
------ - -------- - ---- ---------
------ ----- ---- --------
----- ----- - -------------
------ -
------ -
--
---------- -
----------- ----- -- -
--------------
-
--
-------- -
------------- ----- -- -
------ ----------- - --
-
-
---
-------- --------- -
----- - ------ ------ - - ----------
------ --------
------------ -------------
---
------ -
-----
----------- -------------------
----------- ------ -------------------------
------- ----------- -- ---------------------------------------
------
--
-
-------- ----- -
------ -
-----
-------- --
------
--
-
-------------------- --- ---------------------------------总结
本文介绍了npm包reeasy的使用教程，包括安装、创建store、使用和原理等等。通过本文的学习，我们了解了reeasy的核心功能和优点，以及它与redux的不同之处。同时，本文还提供了示例代码，方便大家进行实战练习。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ebb81e8991b448dc703