简介
redux-reducerless 是一个让你在 Redux 中使用类似于 Context API 的方式管理应用状态的库。相比传统的 Redux，它省略了 reducer 的使用，让代码更加简洁易懂，降低了代码复杂度。
安装
你可以使用 npm 或 yarn 安装 redux-reducerless：
--- ------- ------ ----------------- - -- ---- --- -----------------
用法
在使用 redux-reducerless 之前，需要先安装 redux：
--- ------- ------ ----- - -- ---- --- -----
安装完毕后，我们来看一个简单的例子：
-- --------
------ - ----------- - ---- --------
------ - ------------------------ - ---- --------------------
----- ------------ - -
--------- -----
--
----- ----------- - -- -- -
----- ---------- ------------ - --------------------------------
----- -------------- - --------------------- -- -
---------------------
-- ----
------ -
---------
---------------
--
--
----- -------- - ---------------------------
----- ----- - ------------
------- -- ------
-------------
---------
--
------ ----- ------ - -- -- -
------ -
------------
--
--
------ ------- ------在上面的代码中，我们使用了 reducerlessStoreEnhancer 生成了一个 store，它让我们可以不用 reducer 直接管理状态。我们也用 useLanguage 这个自定义 Hook 封装了一个功能，让我们可以在组件中方便地获取和修改应用语言。
现在，我们把 useApp 这个 Hook 引入到我们的组件中：
-- ------
------ ----- ---- --------
------ - ------ - ---- ----------
-------- ----- -
----- - ----------- - - ---------
----- - --------- -------------- - - --------------
----- -------------------- - -- -- -
-- --------- --- ----- -
---------------------
- ---- -
---------------------
-
--
------ -
-----
---------- --------- --------------
------- ------------------------------------- -----------------
------
--
-
------ ------- ----在上面的代码中，我们使用了 useApp 这个 Hook 获取了 useLanguage 这个 Hook，然后在组件中使用这个 Hook 来获取当前的应用语言和修改语言的方法。在 JSX 中，我们展示了当前的语言，并且使用一个按钮来切换语言。
现在我们启动应用，你会发现每次点击按钮，应用的语言就会从中文和英文之间不断地切换。
源码解析
如果你对 redux-reducerless 的源码实现感兴趣，可以看一下 reducerlessStoreEnhancer 的实现：
------ -------- -------------------------- -
------ ------------- -- --------- --------------- --------- -- -
----- ----- - -------------- -- --------------- ----------
----- ----------- - --- ------
----- --------- - ---------- -- -
--------------------------
------ -- -- -
-----------------------------
--
--
----- -------- - -- -- -
------ -----------------
--
----- -------- - -------- -- -
--- ------ ---------- -- ------------ -
-------------------
-
--
------ -
---------
----------
---------
---------
--
--
-通过这段代码，我们可以看到 reducerlessStoreEnhancer 实际上返回了一个 function，这个 function 接受 createStore 这个函数作为参数，并返回了一个新的 createStore。
在返回的新的 createStore 中，我们使用了原 createStore 中的 preloadedState 和 enhancer，然后生成了一个新的 store。同时，我们定义了一个 subscribers 集合，用于保存所有的监听器信息。
在新的 store 中，我们重写了原有的 subscribe、getState 以及 dispatch 方法。在 subscribe 方法中，我们只是简单地把传入的 listener 加入到 subscribers 集合中。在 getState 方法中，我们从 store 中获取 state，并返回。而在 dispatch 方法中，我们首先遍历 subscribers 集合，然后给每一个 listener 发送一个 action。
由于 subscribers 集合在每一次 dispatch 操作中都会被遍历，因此，我们可以保证每一次修改 state 都会触发所有的监听器。
总结
在本篇文章中，我们介绍了 redux-reducerless 这个 npm 包，并通过一个实际的例子来演示了它的使用方法。我们也讲解了 redux-reducerless 的实现原理，并重写了 subscribe、getState 以及 dispatch 这三个方法，完成了实时监测 state 变化的功能。通过使用 redux-reducerless，我们可以更加简洁地管理应用状态，降低代码的复杂度，使得代码更加易懂易维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f87238a385564ab6d1e