简介
micro-redux 是一个轻量级的 redux 库，专为现代前端应用而设计，它采用了极简主义的设计理念，使得开发者可以快速创建可维护的应用程序。
安装
通过 npm 安装 micro-redux：
npm install micro-redux
使用
创建 store
在 micro-redux 中，store 是应用的中心化数据管理中心。你可以使用 createStore 方法来创建一个全局唯一的 store：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
----- ------------ - -
------ --
--
-- ------- -----------
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------ -
------ - ------ ----------- - - --
-
---- ------------ -
------ - ------ ----------- - - --
-
-------- -
------ ------
-
-
-
-- -- -----
----- ----- - ---------------------getState
你可以使用 getState 方法获取当前 store 中的状态：
const state = store.getState(); console.log(state.count); // 0
dispatch
你可以使用 dispatch 方法来分发 action，从而更新 store 中的状态：
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState().count); // 1
store.dispatch({ type: 'DECREMENT' });
console.log(store.getState().count); // 0subscribe
你可以通过 subscribe 方法来订阅 store 中状态的更改。每次 state 更新时，你传入的回调函数都会被调用：
-- -------------------- ---- ------- -------- ------------------- - ------------------------------------ - ----------------------------------- ---------------- ----- ----------- --- -- - ---------------- ----- ----------- --- -- - ---------------- ----- ----------- --- -- -
你可以通过调用 unsubscribe 方法来取消订阅：
store.unsubscribe(handleStateChange);
示例代码
在下面的示例中，我们将创建一个基本的计数器应用程序，用于展示如何使用 micro-redux：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------ -
------ - ------ ----------- - - --
-
---- ------------ -
------ - ------ ----------- - - --
-
-------- -
------ ------
-
-
-
----- ----- - ---------------------
-------- -------- -
----- ----- - -----------------
------------------------------------------ - ------------
-
------------------------
-------------------------------------------------------------- -- -- -
---------------- ----- ----------- ---
---
-------------------------------------------------------------- -- -- -
---------------- ----- ----------- ---
---在上面的示例中，我们为计数器的加减按钮添加了点击事件，并在 store 状态更新时，调用了 render 方法来更新 DOM。
深度探讨
在本节中，我们将探讨 micro-redux 的一些内部机制以及一些应用场景。
每次 dispatch 都会调用所有的 listener？
是的，每次调用 dispatch 时，所有的 subscriber 都将被调用。micro-redux 采用了仅仅重新复制而非修改现有的 listener 列表的方法，因此，即使你在 listener 中调用了 dispatch，你也不必担心出现无限循环的问题。
为什么需要 Immutable 数据结构？
在 redux 中，state 必须是一个不可变的对象。这是因为如果 state 可以被修改，那么在订阅器中跟踪变化将变得非常困难。在 micro-redux 中，我们采用与 redux 相同的不可变的设计理念，使得我们可以轻松地按照状态树更改进行比对，并跟踪状态的变化。
为什么要使用 Redux？
在项目规模较小时，直接在组件中管理状态是比较容易的。但是，随着应用程序规模的增长，你将很快发现，组件之间共享状态变得越来越困难。使用 Redux 可以使得状态的处理变得更加清晰和简单，并使得状态变化的跟踪和测试变得更加容易。
结论
在本文中，我们了解了如何使用 micro-redux 来创建一个现代化的 Redux 应用程序。我们还讨论了一些内部机制以及 Redux 的一些应用场景和优点。希望这篇文章可以帮助你更好地理解 micro-redux，并帮助你编写更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb281e8991b448dc551