前言
在开发大型应用程序时，状态管理往往是非常重要的部分。Redux 是一个流行的状态管理库，它使得在 JavaScript 应用程序中实现可预测的状态变化变得容易。但是，Redux 的使用需要编写大量的代码。React-Redux 是一个流行的 Redux 的封装，它为我们提供了少量的 API 来链接之间 React 组件和 Redux 存储。但是，在某些情况下，React-Redux API 常常让人感到困惑。
这时，我们可以使用 react-redux-infuser。
react-redux-infuser 是一个非常简单且优雅的库，它把 React 和 Redux 关联在一起，并提供了一个简单易用的 API 以帮助您轻松管理 Redux 状态。
安装
你可以使用 npm 或 yarn 来安装 react-redux-infuser。在命令行中分别输入以下命令即可：
npm install react-redux-infuser
yarn add react-redux-infuser
示例代码
接下来，我们将创建一个示例应用程序，以演示如何在 React 中使用 react-redux-infuser。下面是我们的文件夹结构：
src/ -- App.js -- index.js -- store.js
第一步是将我们的应用程序与 Redux 存储链接起来。创建一个新文件，名为 store.js。以下是该文件的代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
----- -------- - -----------
----- ------- - ------ -- -
------ -
----- ---------
-------- ----
-
-
----- ------------ - ------ - --- ------- -- -
------------------- -
---- ---------
------ ---------- ----------------
--------
------ ------
-
-
----- ----------- - -----------------
------ -------------
---
----- ----- - ------------
------------
---------------------
--
------ - ------ ------- --在上面的代码中，我们首先定义一个 action 类型 ADD_TODO，并创建一个名为 addTodo 的动作创建函数，该函数接受一个文本参数并返回一个 action。然后，我们定义 todosReducer 函数，该函数接受当前 state 和一个 action，根据 action 的类型更新 state 并返回一个新的 state。
我们还定义了根 reducer，该 reducer 将 todosReducer 作为子 reducer，并创建了 Redux 存储，该存储使用 Redux DevTools 扩展增强。
现在，我们的 Redux 存储已经准备好，接下来我们将创建一个 React 组件来使用它。以下是我们的 App.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- ----------------------
------ - ------- - ---- ----------
----- --- - -- -- -
----- -------- - --------------
----- ----- - ----------------- -- -------------
----- ------ -------- - -------------------
----- ------------ - --- -- -
-------------------
------------------------
------------
-
----- ------------ - --- -- -
------------------------
-
------ -
-----
-------- ---------
----- ------------------------
------ ----------- ------------ ----------------------- --
------- --------------------------
-------
----
----------------- ------ -- -
--- -----------------------
---
-----
------
--
-
------ ------- ----在上面的代码中，我们首先导入 useDispatch 和 useSelector 函数，以及我们在 store.js 中创建的 addTodo 动作创建函数。然后，我们在组件中使用 useDispatch 和 useSelector 函数来访问 store 中的状态和操作。我们还创建了一个状态 text 和两个处理函数 handleSubmit 和 handleChange。handleSubmit 函数在表单提交时 dispatch 了一个 addTodo 动作，将 text 加入到 Redux 中。handleChange 函数更新了文本输入框中的文本。
最后，我们在 JSX 中渲染状态并显示 todo 列表。
现在，我们可以在 index.js 文件中呈现我们的应用程序：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- ----------------------
------ - ----- - ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在这里，我们首先导入 Provider 组件，该组件将 store 作为属性传递给它。在 ReactDOM.render 函数中，我们将 App 组件包裹在 Provider 组件中，并将根 DOM 元素传递给 render 方法。
总结
在本教程中，我们学习了如何使用 react-redux-infuser。我们通过设置 Redux 存储和创建一个 React 组件来演示如何使用 react-redux-infuser。我们了解了如何使用 useDispatch 和 useSelector 函数，以及如何在组件中 dispatch 动作。react-redux-infuser 是一个非常强大的库，可以在 React 和 Redux 之间提供一个简单且易用的 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596481e8991b448d6e16