简介
redux-toggle 是一个方便开发者在 React 应用中切换状态的 Redux 组件。它提供了一个切换按钮，并且通过 Redux store 跟踪当前状态并进行改变。在这个教程中，我们会详细介绍如何安装和使用 redux-toggle。
安装
使用 npm 进行安装：
npm install redux-toggle --save
使用
你可以通过以下代码引入 redux-toggle：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ------ ---- ---------------
----- ----- - ---------------------
----------------
--------- --------------
------- --
------------
-------------------------------
--以上代码会渲染一个切换按钮，每次单击切换按钮时，store 中的状态会跟着改变。
Props
redux-toggle 组件的 Props 用于设置初始状态和样式等。
defaultChecked
defaultChecked 是一个布尔值，用于表示是否默认选中。
<Toggle defaultChecked />
className
className 是用于设置组件外层容器的 class 名称，方便进行自定义样式。
<Toggle className="my-toggle" />
checkedClassName
checkedClassName 数组用于设置选中状态时外层容器的 class 名称，可以设置多个。
<Toggle checkedClassName={['my-toggle--checked', 'active']} />uncheckedClassName
uncheckedClassName 数组用于设置未选中状态时外层容器的 class 名称，可以设置多个。
<Toggle uncheckedClassName={['my-toggle--unchecked', 'inactive']} />onToggle
onToggle 是一个函数，用于在切换状态后进行回调。
<Toggle onToggle={() => console.log('toggle!')} />Redux store
redux-toggle 组件的底层使用了 Redux store 来实现状态管理。因此，你需要使用 Redux 的 combineReducers 方法将 reducer 添加到你的 store 中。
以下代码演示了如何添加 redux-toggle 的 reducer：
import { combineReducers } from 'redux';
import { toggleReducer } from 'redux-toggle';
const rootReducer = combineReducers({
toggle: toggleReducer
});
const store = createStore(rootReducer);上述代码会将 toggleReducer 添加到你的 Root Reducer 中，从而可以正常使用 redux-toggle 组件。
示例代码
下面是一个完整的示例代码，演示了如何使用 redux-toggle 和 Redux store：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ ------- - ------------- - ---- ---------------
----- ----------- - -----------------
------- -------------
---
----- ----- - -------------------------
----- --- - -- -- -
-----
---------------- -------
------- --
------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--结论
使用 redux-toggle 可以让你方便地在 React 应用中切换状态，并通过 Redux store 进行管理。使用时需要注意按照要求正确添加 reducer，以及通过 Props 设置组件样式和回调函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d0f