什么是 create-reducer-ts
create-reducer-ts 是一个基于 TypeScript 的轻量级 reducer 创造器，它可以帮助我们更加简单而高效的编写 reducer。
create-reducer-ts 的使用方法
安装
$ npm i create-reducer-ts
引入
import createReducer from 'create-reducer-ts';
使用
-- -------------------- ---- -------
--------- ----- -
------ -------
-
----- ------------- ----- - -
------ --
--
----- ------- - --------------------------- -
---------- ------- -- -
--------------
--
---------- ------- -- -
--------------
--
---- ------- ------- - -------- ------ -- -- -
----------- -- ---------------
--
---
------ ------- -------参数说明
createReducer 接受两个参数：
- initialState：初始状态
- reducers：reducer 函数集合
reducers 集合的 key 为 action.type，值为处理当前 action 的 reduce 函数。
createReducer 的返回值
createReducer 函数会返回一个 reducer 函数，直接将其导出即可作为 Redux 应用的根 reducer。
createReducer 的作用
createReducer 的作用是帮助我们更加简单、高效的编写 reducer。其函数 signature 设计得十分灵活，既可以简单地自增、自减 state，也可以传入 payload 进行加减乘除等运算。
实际案例
假设我们有一个 TodoList 应用，其 state 状态包含以下三个值：
- todos: Todo[]
- filter: 'all' | 'done' | 'undone'
- keyword: string
显然，我们需要编写许多 reducer 函数。
原始写法
-- -------------------- ---- -------
-------- ------------------- ------ ------- - ----- ------- -------- --- -- -
------ ------------- -
---- --------------
------ -
---------
------ -------------------- -- -
-- -------- --- ------------------ -
------ -
--------
------------------
--
-
------ -----
---
--
---- -----------
------ -
---------
------ -
---------------
-
------------------
--- ------------------ - --
----- ------
--
--
--
---- --------------
------ -
---------
------ ----------------------- -- ------- --- ----------------
--
---- -------------
------ -
---------
------- ---------------
--
---- --------------
------ -
---------
-------- ---------------
--
--------
------ ------
-
-在这个例子里，我们需要写出五个 reducer 函数，但是这样写比较冗余，代码也十分冗长。
使用 create-reducer-ts
-- -------------------- ---- -------
------ ------------- ---- --------------------
----- ------------- ----- - -
------ ---
------- ------
-------- ---
--
----- -------- - -
----------- ------- ------- - -------- ---- -- -- -
----- ------------ - -------------------- -- -
-- -------- --- ------------------ -
------ -
--------
------------------
--
-
------ -----
---
------ -
---------
------ -------------
--
--
-------- ------- ------- - -------- ---------- ---- - ------- -- -- -
----- ------- - -
------------------
--- ------------------ - --
----- ------
--
------ -
---------
------ ---------------- ---------
--
--
----------- ------- ------- - -------- ------ -- -- -
----- -------- - ----------------------- -- ------- --- ----------------
------ -
---------
------ ---------
--
--
---------- ------- ------- - -------- ------ -- -- -
------ -
---------
------- ---------------
--
--
----------- ------- ------- - -------- ------ -- -- -
------ -
---------
-------- ---------------
--
--
--
------ ------- --------------------------- ----------可以看到，使用 create-reducer-ts 可以非常方便地将原来冗余和繁琐的代码简洁地进行了重构，实现同样的功能。
总结
通过本文的介绍，我们了解了 npm 包 create-reducer-ts 的使用方法，并成功应用于实际例子。使用 create-reducer-ts 可以大大缩减冗余代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5e81e8991b448ebe03