前言
redux-doghouse 是一个基于 React 和 Redux 框架的状态管理库，它提供了更加简单和易于使用的接口来管理应用程序的状态。在本文中，我们将学习如何在我们的应用程序中使用这个强大的库。
安装
首先要确保你已经安装了 Node.js 的最新版本，之后可以通过 npm 在你的项目中安装 redux-doghouse。在命令行中运行以下命令：
npm install redux-doghouse
使用
在应用程序中添加 redux-doghouse
为了在应用程序中使用 redux-doghouse，我们需要使用 StoreProvider 组件包装我们的应用程序，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -----------------
------ --- ---- --------
----------------
---------------
---- --
-----------------
-------------------------------
--StoreProvider 是 Redux-Doghouse 库提供的一个组件，它使用 React 的上下文提供了应用程序需要使用的 store。 Store 是 Redux 库中用于保存应用程序状态的对象。上面的代码中，我们将应用程序包装在一个 StoreProvider 组件中，并将 StoreProvider 渲染到 document.getElementById('root') 元素中。
创建 store
要使用在应用程序中管理状态，我们需要创建一个 store，并通过 StoreProvider 提供给应用程序。下面是创建一个 store 的示例：
import { createStore } from 'redux-doghouse';
import rootReducer from './reducers';
const store = createStore(rootReducer);在上面的示例中，我们从 redux-doghouse 导入了 createStore 函数，该函数用于创建 Redux store，并将应用程序根 reducer 传递给 createStore 函数。
创建 reducer
state={
message:"Hello World",
count:0
}要使用 redux-doghouse 管理状态，我们需要定义一个 reducer 函数，它将根据 action 的类型触发状态的变化。下面是一个简单的 reducer 函数示例：
-- -------------------- ---- -------
----- ------------ - -
-------- ------ -------
------ -
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
---- -----------------
------ -
---------
-------- --------------
--
--------
------ ------
-
-在上面的示例中，我们定义了一个初始状态 initialState，以及一个根 reducer 函数 rootReducer。在 switch 语句中根据 action 的 type 值来更新状态。 例如，在 'UPDATE_MESSAGE' 操作中，我们使用 action.payload 更新 state 对象中的 message 属性。
使用状态
在应用程序中使用状态，我们可以使用全局选项 useContext 获取 store 对象，并使用该对象的 getState 和 dispatch 方法来访问和修改状态。下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ------------ - ---- -----------------
-------- ----- -
----- - --------- -------- - - -------------------------
----- --------------- - -- -- -
---------- ----- ----------- ---
--
----- --------------- - -- -- -
---------- ----- ----------- ---
--
----- ----------------- - ------- -- -
----------
----- -----------------
-------- ------------------
---
--
------ -
-----
-----------------------------
------- --------------------------------------------
------- --------------------------------------------
------ ----------- ---------------------------- --
---------------------------
------
--
-
------ ------- ----在上面的示例中，我们首先导入了 useContext 和 StoreContext，并使用 useContext 访问 store 对象。我们还定义了两个事件处理程序 handleIncrement 和 handleDecrement，分别触发“INCREMENT”和“DECREMENT”操作。我们还定义了 handleInputChange 事件处理程序，该处理程序将输入框的值作为负载通过“UPDATE_MESSAGE”操作发送到 store。最后，我们使用 getState 方法获取当前 state，并将其渲染到屏幕上。
结论
这就是 redux-doghouse，一个用于简化应用程序状态管理的强大库。它提供了一个易于使用的接口来改变状态，以及一个简单的 Redux 组件，用于将 store 提供给应用程序。在这篇文章中，我们了解了如何安装和使用 redux-doghouse，以及如何定义 reducer 函数和使用状态。现在，你已经知道如何使用 redux-doghouse 管理你的 React 应用程序状态，开始使用吧。
示例代码
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bc7