前言
随着前端项目复杂度的不断提高，前端开发者们也越来越意识到需要使用一些类似于后端的数据管理方式来管理前端应用中的状态。而 Redux 就是其中一种被广泛使用的数据管理库。ts-redux-actions 就是为 Redux 开发者们提供的一个 TypeScript 库，它可以让开发者们更加方便地管理 Redux 中的 action。
安装
首先，我们需要在项目中安装 ts-redux-actions。可以通过如下命令进行安装：
npm install ts-redux-actions
使用
ts-redux-actions 提供了一些类和装饰器来帮助我们更加方便地创建和处理 action。下面将详细介绍如何使用。
1. 创建 Action
在 Redux 开发中，action 是一个简单的 JavaScript 对象，它描述了发生了什么事件，以及相关的数据。而 ts-redux-actions 则可以让我们使用 TypeScript 类型来更加方便地创建 action。
import {ActionCreator, actionCreatorFactory} from 'ts-redux-actions';
const actionCreatorFactoryInstance: ActionCreatorFactory = actionCreatorFactory();
const incrementAction: ActionCreator<{step: number}> = actionCreatorFactoryInstance<{step: number}>('INCREMENT');上面的代码创建了一个名为 incrementAction 的 action，它包含一个名为 step 的字段，并且其值为 number 类型。我们可以通过执行如下代码来创建一个实际的 action：
const action = incrementAction({step: 1});
console.log(action); // {type: 'INCREMENT', payload: {step: 1}}2. 创建 Async Action
在 Redux 中，有时候我们需要处理一些异步的操作，比如网络请求等。而 ts-redux-actions 则可以帮助我们更加方便地创建异步 action。
-- -------------------- ---- -------
------ --------------------- -------------------------- ---- -------------------
----- ---------------------------------- ------------------------- - ----------------------------
----- ---------- ------------------------- ---- -------- ------ - --------------------------------------- ---- -------- ---------------------
----- -------------- - ---- ------- -- ----- ---------- --------- -- -
----------------------------------
--- -
----- -------- - ----- ----------------------
----- ---- - ----- ----------------
------------------------------------
- ----- ------- -
-------------------------------------
-
--上面的代码创建了一个名为 fetchUser 的异步 action，它包含一个名为 id 的字段，并且需要返回一个 User 对象。在创建的过程中，我们需要传入 3 个参数，分别为请求的类型、请求参数类型、返回参数类型。使用时，我们可以像上面代码中一样使用 thunk 来发起网络请求。
3. 处理 Action
在 Redux 中，我们需要编写 reducer 来处理 action 的变化。而使用 ts-redux-actions 后，我们可以方便地使用装饰器来简化 reducer 的编写。
-- -------------------- ---- -------
------ --------- ------------------------ ---- -------------------
------ ----------- ---- ------------
------ --------- ------------ -
------ -------
-
----- ------------- ------------ - -
------ --
--
------ ----- --------------- --------------------- - -------------------------------------
---------------- ------- -------- -- -
------ ---------- ------ ----------- - --------------
---上面的代码展示了如何使用 ts-redux-actions 提供的 reducerWithInitialState 和 case 装饰器来处理 action 变化。通过 case，我们可以添加了一个处理 INCREMENT action 的逻辑。在 case 回调函数内部，我们需要返回一个全新的状态，用来更新 Redux 中的状态树。
结语
使用 ts-redux-actions 可以让我们写出更加简洁、高清晰度的 Redux 代码。希望本篇文章对大家有帮助。完整的示例代码可以参见 GitHub 上的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c3f81e8991b448ebc51