前言
在前端开发中，我们经常需要处理 state 的变化，有时候需要对 state 中的某个属性进行修改。hyperapp-dot-notation-reducer 就是一个帮助我们快速修改 state 属性的 npm 包。
安装
使用 npm 安装 hyperapp-dot-notation-reducer：
npm install hyperapp-dot-notation-reducer
使用方法
reduce 函数
hyperapp-dot-notation-reducer 的核心是 reduce 函数。reduce 函数接收一份旧的 state，一个 action 对象，然后返回一个新的 state。在返回新的 state 的时候，可以使用类似于 JavaScript 中对象属性访问方式的语法来指定要修改的属性。
下面是一个使用 reduce 函数修改 state 的例子：
-- -------------------- ---- -------
------ - ------ - ---- --------------------------------
----- ----- - -
------ --
----- -
----- -------
---- --
--
----- --------- --------- -------
--
----- -------------- - ------------ -- --
------ ----------- - -
----
----- ----------- - -------------- --------- -- --
----- -
----- --------
-
----
----- -------------- - -------------- ----- -- --
----- ------------------- -- - --- -----
----
-- ---- ----- --
----- -------- - ---------------------- -- - ------ -- ----- - ----- ------- ---- -- -- ----- - -------- --------- ------ - -
----- ------------ - ------------------ --------- -- - ------ -- ----- - ----- -------- ---- -- -- ----- - -------- --------- ------ - -
----- --------------- - --------------------- ---------- -- - ------ -- ----- - ----- ------- ---- -- -- ----- - -------- ------ - -可以看到，reduce 函数的使用非常方便，可以快速地修改 state 中的属性。
但是，reduce 函数有一个缺点，就是如果要对一个深层次的属性进行修改，使用 reduce 函数就比较麻烦。这时候，hyperapp-dot-notation-reducer 提供了一种更方便的语法，让我们可以像访问 JavaScript 对象属性一样方便地访问和修改深层次的属性。
dot 函数
hyperapp-dot-notation-reducer 提供了一个 dot 函数，可以使用类似于 JavaScript 中对象属性访问方式的语法来指定要修改的属性，而不需要手动处理深层次的属性。
下面是一个使用 dot 函数修改 state 的例子：
-- -------------------- ---- -------
------ - --- - ---- --------------------------------
----- ----- - -
------ --
----- -
----- -------
---- --
--
----- --------- --------- -------
--
----- ----------- - -----------------
----- ---------------- - --------------
----- --------------- - ---------------
----- --------- - --------------- -- ------ -----------
-- ---- ----- --
----- -------- - ------------------ --------- -- - ------ -- ----- - ----- -------- ---- -- -- ----- - -------- --------- ------ - -
----- ------------ - ----------------------- ---------- -- - ------ -- ----- - ----- ------- ---- -- -- ----- - --------- --------- ------ - -
----- --------------- - ---------------------- ---------- -- - ------ -- ----- - ----- ------- ---- -- -- ----- - -------- --------- -------- - -
----- --------------- - ----------------- -- - ------ -- ----- - ----- ------- ---- -- -- ----- - -------- --------- ------- -------- - -可以看到，使用 dot 函数修改深层次的 state 属性非常方便。
小结
hyperapp-dot-notation-reducer 是一个方便修改 state 属性的 npm 包，使用起来非常方便，可以极大的提高我们的开发效率。使用 reduce 函数可以快速地修改 state 中的属性，而使用 dot 函数可以更方便地修改深层次的属性。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448dda93