1. 什么是 redux-actors
redux-actors 是一个实现了异步操作和副作用的 redux 中间件，相比于 redux-thunk 或 redux-saga 等，redux-actors 更加轻量级且易于使用。同时，redux-actors 也支持 TypeScript，使得类型检查更加方便。
redux-actors 通过将副作用代码从 reducer 中抽离出来，使得代码更加模块化、易于测试，同时也提高了应用程序的可维护性。
2. 安装
使用 npm 安装 redux-actors：
npm install 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
