前言
在日常的前端开发中，随着业务的不断发展，业务复杂度也不断增加，繁琐的 state 状态管理也成了每个前端工程师需要面对的挑战。然而，Redux 作为一种非常优秀的状态管理工具，已经逐渐成为了前端开发不可缺少的一部分。
在 Redux 中，如何有效地描述 action、reducer、以及应用 store 等的关系，如何优雅地优化 Redux 代码的复杂性，往往也是每个前端工程师需要面对的问题。而 @chidumennamdi/redux 的出现，很好地解决了这类问题，并且得到了广泛的应用。
本文主要介绍了 @chidumennamdi/redux 的使用教程，包含了深入的介绍和代码示例，以便初学者快速上手，并掌握 Redux 状态管理技术的精髓。
@chidumennamdi/redux 简介
@chidumennamdi/redux 是一个基于 Redux 技术的状态管理工具，它旨在帮助前端工程师更加高效地进行状态管理，并且实现了对 Redux 状态树的快速读写操作，使得 Redux 实现的状态可以更加简洁易读，规范化。
相较于 Redux 官方的使用说明，@chidumennamdi/redux 不仅可以轻松地对 Redux 的 action/reducer/store 等实现进行管理，还可以更加方便、简单地进行拓展和优化，提高前端开发效率。
@chidumennamdi/redux 的安装和使用
安装 @chidumennamdi/redux：
--- ------- -------------------- ------
使用方法：
------ - ----------- - ---- ----------------------- ----- ------- - ------- ------- -- ------ ----- ------ - ---------------------
这样就完成了 @chidumennamdi/redux 库的引入，随后我们就可以方便地使用其提供的各种函数和变量。
下面，我们将通过一个 TodoList 的例子，展示如何使用 @chidumennamdi/redux 实现一个完整的状态管理系统。
假设有一个简单的 TodoList 项，我们可以通过以下代码实现：
------ - ----------- - ---- -----------------------
-- -- ------ --
----- -------- - -----------
-- -- ------ --
----- ------- - ------ -- --
----- ---------
----
---
-- -- -------
----- ------------ - ---
----- ----- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ ---------- - ----- ----------- ---
--------
------ ------
-
--
-- -- -----
----- ----- - -------------------
-- ----
----- ------ - -- -- -
------------------------------
--
---------
----------------------------- ----------
---------通过上面的代码，我们便完成了一个基于 @chidumennamdi/redux 的 TodoList 状态管理系统。作为初学者，可能会对上述代码产生疑问或不理解，接下来，我们将对这段代码进行详细解析：
首先，我们引入了 @chidumennamdi/redux 库中的 createStore 方法：
------ - ----------- - ---- -----------------------
然后，我们定义了一个 ADD_TODO 的 action 常量，并定义了一个 addTodo 的 action 函数：
----- -------- - -----------
----- ------- - ------ -- --
----- ---------
----
---接着，我们定义了一个 todos 的 reducer 函数：
----- ------------ - ---
----- ----- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ ---------- - ----- ----------- ---
--------
------ ------
-
--在这里，我们将 state 的初始化值赋值为了一个空的数组，以此为基础，通过 ADD_TODO 的 action，对 state 进行更新，返回一个新的 state。
接下来，我们利用 createStore 函数定义了 store：
----- ----- - -------------------
最后，我们定义了一个 render 函数，其中通过 getState 函数，获取 store 中当前的 state 状态：
----- ------ - -- -- -
------------------------------
--在之后，我们调用了 store.dispatch(discoverRocket())，触发了 ADD_TODO action，从而引起了 state 状态的变化：
----------------------------- ----------
最后，执行 render 函数，并输出最终的 state 状态：
---------
@chidumennamdi/redux 中常用方法
createStore(reducer, [preloadedState], [enhancer])
createStore 是 @chidumennamdi/redux 中最常用、最基本的方法，它用于创建一个 Redux Store。该方法接收三个参数：reducer，preloadedState 或 enhancer。
- reducer: 一个接收两个参数的函数，第一个参数是当前 state 状态，第二个参数是 action（一个普通对象，形如 { type: 'actionName', ... }）
- preloadedState: 可选，代表初始化 state 状态
- enhancer: 可选，提供了一些增强 store 的能力，可以理解为一种遥控器
store.dispatch(action)
store.dispatch 函数用于触发 action，触发后，Redux 会调用对应的 reducer 函数，进而更新 status 状态。该函数接收一个 action 参数，代表应用的行为。
store.getState()
store.getState 函数返回当前应用程序的 state 状态。
store.subscribe(listener)
store.subscribe 函数用于注册监听器，每当 dispatch 函数触发时，listener 都能收到通知。该函数接收一个 listener 参数，代表观察者。我们可以通过 store.subscribe(listener) 来注册一个新的 listener，例如：
------------------ -- -
------------------------------
--通过上面这些方法，我们可以充分利用 @chidumennamdi/redux 提供的功能，简单高效地实现状态管理。
总结
@chidumennamdi/redux 是一个非常优秀的状态管理工具，相较于 Redux 官方的使用说明，@chidumennamdi/redux 使用更为通俗易懂，更加符合前端工程师的思维方式。本篇文章详细地介绍了 @chidumennamdi/redux 的使用方法，并通过实例的方式让初学者更好地理解其使用。相信初学者们通过本文的学习，能够更加容易地掌握 Redux 状态管理技术这一重要知识点，并且更加高效地进行状态管理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60059ac381e8991b448ed429