前言
在日常的前端开发中，随着业务的不断发展，业务复杂度也不断增加，繁琐的 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：
npm install @chidumennamdi/redux --save
使用方法：
import { createStore } from '@chidumennamdi/redux';
const reducer = (state, action) => {...};
const store1 = createStore(reducer);这样就完成了 @chidumennamdi/redux 库的引入，随后我们就可以方便地使用其提供的各种函数和变量。
下面，我们将通过一个 TodoList 的例子，展示如何使用 @chidumennamdi/redux 实现一个完整的状态管理系统。
假设有一个简单的 TodoList 项，我们可以通过以下代码实现：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------------
-- -- ------ --
----- -------- - -----------
-- -- ------ --
----- ------- - ------ -- --
----- ---------
----
---
-- -- -------
----- ------------ - ---
----- ----- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ ---------- - ----- ----------- ---
--------
------ ------
-
--
-- -- -----
----- ----- - -------------------
-- ----
----- ------ - -- -- -
------------------------------
--
---------
----------------------------- ----------
---------通过上面的代码，我们便完成了一个基于 @chidumennamdi/redux 的 TodoList 状态管理系统。作为初学者，可能会对上述代码产生疑问或不理解，接下来，我们将对这段代码进行详细解析：
首先，我们引入了 @chidumennamdi/redux 库中的 createStore 方法：
import { createStore } from '@chidumennamdi/redux';然后，我们定义了一个 ADD_TODO 的 action 常量，并定义了一个 addTodo 的 action 函数：
const ADD_TODO = 'ADD_TODO';
const addTodo = (text) => ({
type: ADD_TODO,
text
});接着，我们定义了一个 todos 的 reducer 函数：
-- -------------------- ---- -------
----- ------------ - ---
----- ----- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ ---------- - ----- ----------- ---
--------
------ ------
-
--在这里，我们将 state 的初始化值赋值为了一个空的数组，以此为基础，通过 ADD_TODO 的 action，对 state 进行更新，返回一个新的 state。
接下来，我们利用 createStore 函数定义了 store：
const store = createStore(todos);
最后，我们定义了一个 render 函数，其中通过 getState 函数，获取 store 中当前的 state 状态：
const render = () => {
console.log(store.getState());
};在之后，我们调用了 store.dispatch(discoverRocket())，触发了 ADD_TODO action，从而引起了 state 状态的变化：
store.dispatch(addTodo('Learn Redux!'));最后，执行 render 函数，并输出最终的 state 状态：
render();
@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，例如：
store.subscribe(() => {
console.log(store.getState());
})通过上面这些方法，我们可以充分利用 @chidumennamdi/redux 提供的功能，简单高效地实现状态管理。
总结
@chidumennamdi/redux 是一个非常优秀的状态管理工具，相较于 Redux 官方的使用说明，@chidumennamdi/redux 使用更为通俗易懂，更加符合前端工程师的思维方式。本篇文章详细地介绍了 @chidumennamdi/redux 的使用方法，并通过实例的方式让初学者更好地理解其使用。相信初学者们通过本文的学习，能够更加容易地掌握 Redux 状态管理技术这一重要知识点，并且更加高效地进行状态管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60059ac381e8991b448ed429