前言
在构建复杂应用程序时，数据经常在组件之间传递。随着应用程序复杂度的增加，传递和管理数据变得困难。React 正是为了简化这个过程而生的。但是，随着应用变得越来越大，我们需要管理一个全局数据状态，使得任何组件都可以轻松地使用和更新状态。这就是为什么出现了 Redux。
Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以大幅简化 React 应用程序中数据的传递和管理。 react-redux-basics 是一个针对 Redux 的 React 绑定库，可以更容易地在 React 应用程序中使用 Redux。这篇文章将向您介绍如何使用 react-redux-basics npm 包。
安装 react-redux-basics
要安装 react-redux-basics npm 包，请打开终端并输入以下命令：
npm install --save react-redux-basics
它将自动将其加入您的项目，并包含了您可以使用的特定 API。
建立 Redux Store
首先，我们需要创建一个 Redux store 来存储数据。我们可以使用 createStore 函数创建一个 store。我们需要在 store 中提供一个 reducer 函数，它将处理传递到 store 的 action。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
------ ----- ----- - ----------------------------这个例子会创建一个 Redux store，它只是简单地记录一个计数器。我们先定义了 initialState 常量中的状态对象，它包含了 count 属性。接着我们定义了 counterReducer ，它接收一个 state 和一个 action ，并用 switch 语句根据 action.type 处理不同的 action，并返回新的 state 。最后我们调用 createStore 函数，将 counterReducer 作为参数传递给它，以创建 Redux store。
使用 Provider Wrapper
我们需要为全局存储库 store 创建一个 Provider 包装器，以使其可用于从根组件向其他组件提供状态。我们可以像这样使用 Provider 包装器：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们将我们的 App 组件包装在一个 Provider 组件中，并传递我们的 Redux store 作为属性。
使用 connect 函数
现在，我们已经设置了 Redux store 和我们的 Provider Wrapper，我们需要将 store 中的计数器状态绑定到我们的组件以进行显示和修改。
我们可以在组件中使用 connect 函数来实现在 store 中检索并更新状态。connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps ，它返回一个新函数，它将接收一个组件作为其参数。我们可以通过以下方式使用 connect 函数访问状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- ------ ---------- --------- -- -- -
------ -
-----
------- -------------------------------
----------------
------- -------------------------------
------
--
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - ---------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
---
------ ------- ------------------------ -----------------------------在上面的代码中，我们定义了名为 Counter 的函数式 React 组件。我们向该组件传递了 count 状态和 increment 和 decrement 作为 props 。
接着，我们定义了两个名为 mapStateToProps 和 mapDispatchToProps 的函数，前者接受 store 的全局状态 state 作为参数，后者接受 dispatch 函数作为参数，以便我们可以在组件中调用 dispatch 函数进行 action 的分发。
使用 connect 函数我们将 mapStateToProps 和 mapDispatchToProps 作为它的参数。它会返回一个新函数，将我们的 Counter 组件作为参数，并返回已连接到 Redux store 的新组件。
将 Counter 添加到我们的 React 应用
我们在这里演示了 react-redux-basics 的最小用例。现在，我们需要将我们的 Counter 组件添加到 React 应用程序中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------
----- --- - -- -- -
------ -
-----
----------- -------
-------- --
------
--
--
------ ------- ----这个例子将我们的 Counter 组件添加到应用程序的根组件中。
现在，我们已经完成了使用 react-redux-basics 实现在 React 应用程序中使用 Redux 的基础教程。这为我们提供了一种非常简单的方式来处理应用程序中的状态管理，避免了传递 props 的复杂和麻烦。我们还向您展示了 connect 函数如何将状态和 action creators 与 React 组件连接起来。现在，你可以继续探索和使用更多的 react-redux-basics API，以完成您的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66d2d