如今，在前端开发领域，Redux 已经成为了不可或缺的一个状态管理框架。在 Redux 中，reducer 所扮演的角色非常重要，而 reducer 的可复用性则取决于是否能够合理地归纳 action，这就需要合适的 action 处理方式。
而 npm 包 redux-action-handlers 很好地解决了这个问题，本文将详细介绍这个包的使用方法。
安装
通过 npm 可以直接安装这个包：
npm install --save redux-action-handlers
功能
使用 redux-action-handlers，可以更为优雅地处理 Redux 的 action，提高代码的可读性和可维护性。
使用该包，我们可以给每一个 reducer 注册 handler。当一个 action 使用 reducer 处理时，会根据 action.type 查找该 reducer 已注册的 handler。Handler 执行完成后会返回一个新的 state 对象。
在 redux-action-handlers 中，一个 Handler 主要由以下两个部分组成：
- 接受一个 state 对象和 action 对象作为参数，并返回一个新的 state 对象。
- 匹配一个特定的 action.type 对象。
用法
在全局 store 中引入 redux-action-handlers：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------------------- - ---- ------------------------ ------ ----------- ---- ------------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ---------------- ------------------------- - --展开代码
在对应的 reducer 中，我们可以注册并处理对应的 action：
-- -------------------- ---- ------- ------ - -------------------- - ---- ------------------------ ------ - -------------------- -------------------- - ---- ------------------- ----- ------------------------- - - ------ --- ----------- ------ -- ------ ------- -------------- - -------------------------- ------- - ----- -------- - - ---------------------- -------- -------- -- - ------ - ---------- ----------- ---- -- -- ---------------------- ------- ------- -- - ------ - --------- ------ -------------- -- -- -- ------ ------------------------------- ------ -------- -展开代码
正如上面的代码，我们可以看到，只要简单地给 reducer 注册对应的 handler，无需针对每个 action 编写特定的 switch 语句，就可以更加优雅地获取到对应的 state。
示例
下面是一个完整的示例代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- - ---- ------------------------ ------ ----------- ---- ------------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ ---------------- ------------------------- - -- ------ ----- ------------------- - ---------------------- ------ ----- ------------------- - ---------------------- ------ -------- ------------------- - ------ - ----- -------------------- -- - ------ -------- ------------------------ - ------ - ----- -------------------- -------- ------ -- - ----- ------------------------- - - ------ --- ----------- ------ -- ------ ------- -------------- - -------------------------- ------- - ----- -------- - - ---------------------- -------- -------- -- - ------ - ---------- ----------- ---- -- -- ---------------------- ------- ------- -- - ------ - --------- ------ -------------- -- -- -- ------ ------------------------------- ------ -------- -展开代码
在对应的 actions 文件中，我们定义了两个 action：
- FETCH_POSTS_REQUEST：当我们需要获取文章列表时，就可以发送这个 action
- FETCH_POSTS_SUCCESS：当列表请求成功时，返回成功 action，并写入新的文章列表数据
在对应的 reducer 文件中，注册相应的 handler：
-- -------------------- ---- ------- ------ - -------------------- - ---- ------------------------ ------ - -------------------- -------------------- - ---- ------------------- ----- ------------------------- - - ------ --- ----------- ------ -- ------ ------- -------------- - -------------------------- ------- - ----- -------- - - ---------------------- -------- -------- -- - ------ - ---------- ----------- ---- -- -- ---------------------- ------- ------- -- - ------ - --------- ------ -------------- -- -- -- ------ ------------------------------- ------ -------- -展开代码
最后，我们可以在我们的组件中，触发对应的 action：
-- -------------------- ---- ------- ------ - --------- - ---- -------- ------ - ----------- - ---- -------------- ------ - ------------------ ----------------- - ---- ------------------- -------- ---------- - ----- -------- - -------------- ------------ -- - ------------------------------ ------------------------------------- -------------- -- ---------------- ---------- -- ---------------------------------- ------------ -- ---------------------- -- ---- ------ - ---- --- ------- --- ----- -- - ------ ------- ---------展开代码
通过以上代码，我们可以快速在组件中获取到对应的状态，并进行相应的操作。
总结
redux-action-handlers 包不仅使得我们可以更加优雅地处理 Redux 的 action，同时也能提高代码可读性和可维护性。希望本文对于大家使用该包具有指导意义。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f4c81e8991b448dcd1e
