1. 什么是 redux-actors
redux-actors 是一个实现了异步操作和副作用的 redux 中间件，相比于 redux-thunk 或 redux-saga 等，redux-actors 更加轻量级且易于使用。同时，redux-actors 也支持 TypeScript，使得类型检查更加方便。
redux-actors 通过将副作用代码从 reducer 中抽离出来，使得代码更加模块化、易于测试，同时也提高了应用程序的可维护性。
2. 安装
使用 npm 安装 redux-actors：
--- ------- ------------
3. 使用教程
3.1 创建 actors
在 redux-actors 中，actor 是一个负责处理某个特定副作用的函数，可以将其看做是 redux-thunk 中的 action creator。
创建一个 actor 需要使用 createActor 方法，它接收一个函数，该函数可以在副作用调用成功或失败时返回一个 Promise 对象。
下面以获取用户信息为例，创建一个 actor：
------ - ----------- - ---- ---------------
--------- ---- -
--- -------
----- -------
------ -------
-
----- --------- - ------------------- ------------------- ----- -------- -- -
----- -------- - ----- ------------------------------
-- -------------- -
----- --- ---------------------------
-
----- ---- - ----- ----------------
------ -----
---
------ ------- - --------- --上面的代码中，createActor 方法接收两个泛型参数，第一个参数是 action 的 type，第二个参数是 actor 函数的输入和输出类型。在上面的例子中，输入类型为 number，即 userId，输出类型为 User。
在 actor 函数中，使用 async/await 风格调用副作用代码，当成功时返回结果，当失败时抛出异常。在上面的例子中，当响应码不为 200 时，需要抛出异常，将在 catch 分支中处理。
3.2 创建 reducer
在创建 reducer 之前，需要在 index.ts 中将 actor 和 store 整合起来：
------ - ---------------- ------------ --------------- - ---- -------- ------ - --------------------- - ---- --------------- ------ ------ ---- ----------- ----- ----------- - ----------------- -- --- --- ----- --------------- - ------------------------------ ----- ----- - ------------------------ ---------------------------------- ------ ------- ------
上面的代码中，使用 createActorMiddleware 方法创建一个中间件，传入包含所有 actor 的对象。然后，在创建 store 时，将该中间件添加到 applyMiddleware 方法中。
接下来，创建 reducer 处理 action，使用 createReducer 方法创建 reducer，该方法接收一个处理 action 和副作用的函数：
------ - ------------- - ---- ---------------
--------- --------- -
------ -
--- -------
----- -------
------ -------
--
-------- --------
------- -------
-
----- ------------- --------- - -
----- ----------
-------- ------
------ ----------
--
----- ----------- - ---------------------------
---------------------- ------- -- -
------ -
---------
-------- -----
--
--
------------------------ ------- -------- -- -
------ -
---------
-------- ------
----- --------
--
--
------------------------ ------- -------- -- -
------ -
---------
-------- ------
------ ----------------
--
---
------ ------- ------------上面的代码中，userReducer 处理 fetchUser.start、fetchUser.success 和 fetchUser.failure 这三种 action。
当发起 fetchUser.start action 时，将 loading 状态设置为 true；当处理 fetchUser.success action 时，将请求结果保存到 data 中；当处理 fetchUser.failure action 时，将错误信息保存到 error 中。
3.3 组件中使用
在 React 组件中使用 redux-actors 时，可以通过 connect 方法将组件与 store 连接起来，然后通过 props 将 fetchUser action 传递到组件中。以下是一个示例：
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
--------- --------- -
------- -------
------ -
--- -------
----- -------
------ -------
--
-------- --------
------- -------
---------- -------- ------- -- -----
-
----- ----- ------------------- - --
-------
-----
--------
------
----------
-- -- -
------------ -- -
------------------
-- -------- ------------
-- --------- -
------ ----------------------
-
-- ------- -
------ -------------------
-
-- ------- -
------ -----
-
------ -
-----
--------------------
-------------------
------
--
--
----- --------------- - ------- --------- --------- ---------- -- -
----- - ------ - - ---------
------ ------------------ -- -
-------
-------- ------
--
--
------ ------- ------------------------ - --------- ---------上面的代码中，mapStateToProps 方法将 store 中的状态映射到组件的 props 中，其中 ownProps 是组件自己的 props。
注意，在使用 fetchUser 时，需要将其作为 connect 的第二个参数传递进去。
4. 总结
通过本文的学习，我们了解了 redux-actors 的使用方法，包括创建 actor、reducer、在组件中使用等。同时，也了解了 redux-actors 相比于 redux-thunk 和 redux-saga 的优势，可以更加轻量级、易于使用，同时也支持 TypeScript。
在实际项目中，可以根据项目情况选择合适的副作用框架。在需要使用 redux 时，可以考虑使用 redux-actors 实现副作用的处理，提高应用程序的可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700ce361a36e0bce8c7b