介绍
Tuex 是一个基于 redux 的状态管理库，主要目的是减少 redux 使用的样板代码，提高开发效率。Tuex 使用 TypeScript 编写，具有类型推导和良好的类型保证，并且拥有可观察的状态管理能力。
安装
你可以使用 npm 或者 yarn 安装 tuex：
npm install tuex
或
yarn add tuex
开始使用
Tuex 的使用非常简单。我们将通过一个小示例来说明如何使用。
首先，我们需要创建一个类型声明文件来描述我们的状态模型：
// src/types.ts
interface AppState {
count: number;
}
export default AppState;在这个例子中，我们只声明了一个名为 count 的数字类型属性。接下来，我们将创建一个名为 actions 的文件夹来存放我们的所有 action 类型和 action 创建器：
-- -------------------- ---- -------
-- --------------------
------ - ------ - ---- -------
------ ----- --------- - ------------
------ ----- --------- - ------------
------ --------- --------------- ------- ------------- ---------- --
------ --------- --------------- ------- ------------- ---------- --
------ ---- ------------- - --------------- - ----------------
------ -------- ------------ --------------- -
------ -
----- ----------
--
-
------ -------- ------------ --------------- -
------ -
----- ----------
--
-在这个例子中，我们定义了两个 action 类型：IncrementAction 和 DecrementAction。我们还定义了一个称为 CounterAction 的联合类型，该类型将我们的两个 action 类型组合成一个类型。我们还定义了用于创建这些 action 的工厂函数。
现在，我们将创建一个名为 reducers 的文件夹来存放我们的 Reducer：
-- -------------------- ---- -------
-- -----------------------
------ - ------------- - ---- -------------------
------ -------- ---- -----------
------ -------- --------------------- --------- ------- --------------- -------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-这个 Reducer 的代码比较简单：它通过接收状态和 action，来修改应用程序的状态。
最后，我们需要将上面提到的所有内容组装起来，创建名为 store 的文件来创建并暴露我们的 store：
-- -------------------- ---- -------
-- ------------
------ - ----------- - ---- -------
------ -------- ---- ----------
------ - -------------- - ---- ---------------------
----- ----- - -----------------------
------------- -
------ --
--
--------- -
-------- ---------------
--
---
------ ------- ------在这个例子中，我们使用 createStore 创建一个新的 store，并将应用的初始状态（在这种情况下仅有 count 为 0）和 Reducer 地图传递给它。最后，我们将 store 导出以供使用。
现在我们已经将所有的基础设施设置好了，我们可以在 React 项目中使用稍微改变一下就好。下面是一个小的例子：
-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ ----- ---- ----------
------ - --------- -------- - ---- -------
------ - ---------- --------- - ---- ------------
-------- ----- -
----- - --------- -------- - - -----------
------ -
-----
---------------------------
------- ----------- -- -----------------------------------------
------- ----------- -- -----------------------------------------
------
--
-
-------- ------------ -
------ -
--------- --------------
---- --
-----------
--
-
------ ------- -----------在这个例子中，我们将 Tuex 的 Provider 组件和 React 应用程序的根 App 组件连接起来。在 App 中，我们使用 Tuex 提供的 useStore 钩子来获取 store 对象，然后使用 store 对象的 getState 方法来获取状态。同时，我们使用 store 对象的 dispatch 方法来分别分发（dispatch） increment 和 decrement 方法的 action。
总结
这就是对 Tuex 的一个简短的介绍，Tuex 的 API 非常简单，适合 redux 用户快速学习和适应它。本文已经涵盖了 Tuex 的主要部分，为你提供了一个很好的起点。如果你想要更深入的学习，查看官方文档和例子，从中可以发掘更多的细节和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727081e8991b448e8a5b