介绍
with-redux-types是一个用于React应用程序的npm包，它可以帮助开发人员更好地管理redux状态。它利用了TypeScript的类型定义来减少人为错误，并允许开发人员更轻松地定义、编写和使用redux状态。
安装
要安装with-redux-types，您可以使用npm或yarn。在您的项目目录下运行以下命令：
npm install with-redux-types
或
yarn add with-redux-types
用法
使用with-redux-types，开发人员可以使用TypeScript类型定义声明他们的redux状态，并使其通过wrapper组件注入到应用程序的组件中。下面是使用with-redux-types的简单示例：
1. 创建类型定义
在您的应用程序中，您需要创建一个类型定义，以声明使用的状态和它们的类型。假设您有一个应用程序，其中有一个名为User的状态，它的类型是一个JavaScript对象，其中包含用户的详细信息。您可以创建以下类型定义：
-- -------------------- ---- -------
------ ------------ ---- -------------------
------ --------- --------- -
----- -------
------ -------
---- -------
-
------ ---- -------------- -
-------- - -----------
--------- - ------------
------- - ----------
-
------ ---- ---------- -
- ----------------------------------- -------
- ------------------------------------ -------
- ---------------------------------- --------此定义声明了User状态的形状和可用操作。 UserState 接口表示该状态的形状。 UserActionType 枚举列出了可用的操作类型。 UserAction 类型表示每个操作的有效荷载。
2. 创建状态管理函数
在您的应用程序中，您需要创建一个状态管理函数，它将通过createStore()方法创建一个redux存储器。假设您有一个名为userReducer的状态管理函数来处理User状态。您可以创建以下函数：
-- -------------------- ---- -------
------ - ------- - ---- --------
------ - ---------- ----------- -------------- - ---- ----------
----- ------------- --------- - -
----- ---
------ ---
---- --
--
----- ------------ ------------------ ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------------
------ ---------- ----- ----------------
---- -------------------------
------ ---------- ------ ----------------
---- -----------------------
------ ---------- ---- ----------------
--------
------ ------
-
--
------ ------- ------------此函数将一个操作应用于User状态，并返回新状态。
3. 使用withReduxTypes()创建容器组件
在您的应用程序中，您需要创建容器组件，它将作为包装器来包装其他组件，并通过props注入状态到它们中。您可以使用withReduxTypes()函数来创建这个包装器组件如下：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ - ----------- --------- - ---- ----------
------ ----------- ---- -------------
----- --------------- - ------- ---------- -- --
----- ------
---
----- ------------------ - -
-------- ------ ------- -- --
----- ------------------------
-------- -----
---
--------- ------- ------- -- --
----- -------------------------
-------- ------
---
------- ----- ------- -- --
----- -----------------------
-------- ----
---
--
------ ----- -------- - ------------------------- ----------- ------ ---------------------
---- ------- -- --- ----- ---- -- --- -----
-------- ------------ -- --- ------- --------
---------------- -- --------------- ---- -----------
------------------- -- ------------------ ---- -----------
---withReduxTypes()函数将使用redux和react-redux库创建一个容器组件，并将返回一个高阶组件，该组件可以应用一些功能，以注入Redux操作函数和状态到其子组件中。此函数需要以下参数：
- key: Redux状态数据片段名称。
- reducer: Reducer函数。
- mapStateToProps: 传递到react-redux的mapStateToProps函数。
- mapDispatchToProps: 传递到react-redux的mapDispatchToProps函数。
示例
下面是一个完整的示例，用于说明如何在React组件中使用withReduxTypes：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
--------- ----- -
----- -------
------ -------
---- -------
-------- ------ ------- -- -----
--------- ------- ------- -- -----
------- ----- ------- -- -----
-
----- ----- --------------- - -- ----- ------ ---- -------- --------- ------ -- -- -
------ -
-----
-------- ----------
--------- -----------
------- ---------
------ ------------ ----------------- -- ---------------------------- --
------ ------------- ----------------- -- ----------------------------- --
------ ----------- ----------------- -- ----------------------------------- --
------
--
--
------ ------- ---------------这是一个使用上述例子中创建的withUser容器组件的User函数式组件。由于它已被withUser高阶组件包装，因此可以使用name、email、age、setName、setEmail和setAgeprop，这些prop代理了与userReducer关联的User状态的名称、值以及相关操作。在组件中的用户输入更新redux状态的值，而这个状态通过高阶组件处理完后又注入到子组件中。
结论
使用withReduxTypes，您可以更轻松地管理并使用redux状态，并避免可能的bug和类型错误。它是一种非常有用的工具，可以简化和加速您的开发，并减少调试时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c25