前言
在前端开发中，状态管理是一个不可避免的问题，而 Redux 是目前前端最流行的状态管理库之一。Redux 提供了一种可预测的状态管理方式，提高了应用程序可维护性和可重用性。随着应用程序复杂度的增加，Redux 的使用变得越来越普遍。在使用 Redux 过程中，我们可能会遇到需要在 reducer 中切换状态的需求，而 redux-toggler 正是为这种需求而生。本文将详细介绍 redux-toggler 的使用。
安装
在开始使用 redux-toggler 之前，我们需要先安装它。安装最新版本的 redux-toggler，可以使用 npm：
npm install redux-toggler --save
简介
redux-toggler 是一个简单易用的 Redux 增强库，允许你在 reducer 中切换状态，并且保证返回的状态是新的状态而不是老的状态。它提供了一种更加优雅和简单的方式来完成 reducer 中状态的切换。
使用
在使用 redux-toggler 之前，我们需要先了解它的用法。redux-toggler 的核心是 toggler 方法，它接受两个参数：actionTypes 和 reducer。
actionTypes
actionTypes 参数是一个数组，包含了所有需要切换的状态的 action types。例如，我们有一个 ShoppingCart 组件，需要在 reducer 中切换 cartShown 和 cartHidden 状态。
const actionTypes = ['CART_SHOW', 'CART_HIDE'];
reducer
reducer 参数是一个方法，它接受两个参数：state 和 payload。state 是 reducer 中的当前状态，payload 是 Redux action 的数据负载。
我们需要定义一个 reducer 来响应 actionTypes 中定义的 action types。
-- -------------------- ---- -------
----- ------------ - -
---------- -----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ---------- ---- --
---- ------------
------ - --------- ---------- ----- --
--------
------ ------
-
--我们可以看到，这是一个非常典型的 reducer。它处理 CART_SHOW 和 CART_HIDE 这两个 action types，并返回适当的状态。
使用 redux-toggler
我们现在可以使用 redux-toggler 来改进我们的 reducer。使用 toggler 方法来包装我们的 reducer，它会返回一个新的 reducer，可以处理来自 actionTypes 中定义的 action types。我们需要将 actionTypes 数组和我们的 reducer 传递给 toggler 方法。
-- -------------------- ---- -------
------ - ------- - ---- ----------------
----- ----------- - ------------- -------------
----- ------------ - -
---------- -----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ---------- ---- --
---- ------------
------ - --------- ---------- ----- --
--------
------ ------
-
--
------ ------- -------------------- -------------这样，我们的 reducer 现在可以处理来自 CART_SHOW 和 CART_HIDE action types 的 action，并使用 redux-toggler 来切换状态。redux-toggler 会自动处理响应的 action types，并返回更新后的状态。在使用 redux-toggler 的情况下，我们可以删除 reducer 中的 switch 语句，变得更加简洁。
总结
在本文中，我们详细介绍了 redux-toggler 的用法，并提供了示例代码。redux-toggler 为我们提供了一种更优雅和简单的方法来完成 reducer 中状态的切换，提高了应用程序的可维护性和可重用性。虽然 redux-toggler 不能解决我们所有的问题，但它可以是我们的工作更加轻松和愉快。让我们开始使用 redux-toggler 来优化我们的 reducer 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d10