前言
Redux 是一种非常流行的 Javascript 应用程序状态管理库，它使前端开发人员可以轻松地管理应用程序的状态，使代码更加可维护和可扩展。这篇文章将介绍如何实现 Redux 的局部更新，以及如何使用 React-Redux 将其集成到 React 应用程序中。
Redux Basics
如果您不太熟悉 Redux，请先阅读 Redux 基础知识部分。
在 Redux 中，我们通常有一个包含应用程序状态的单一 store 对象。我们的应用程序状态可以使用 reducer 函数来更新。当我们需要更新状态时，我们会使用一个 action 对象来描述我们想要进行的操作。这个 action 对象传递给 reducer 函数，它将返回一个新的状态对象。在 Redux 中，我们不会（也不能）直接修改状态本身。
让我们看一个简单的 Redux store 和 reducer 的例子：
----- ------------ - -
-------- --
----- --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------ -
------ - --------- -------- ------------- - - --
-
---- -------------- -
------ - --------- ----- -------------- --
-
--------
------ ------
-
-
----- ----- - ---------------------在这个例子中，我们定义了一个名为 reducer 的函数，它接受一个名为 state 的参数和一个名为 action 的参数。我们在 reducer 中处理每个操作，并返回一个新状态。我们还创建了一个名为 store 的 Redux store。使用 createStore() 函数，我们将 reducer 函数提供给 Redux，用于创建一个包含初始状态的全局状态对象。我们可以 dispatch actions 来更新状态。
Redux 的全局状态更新机制很好，但有时我们只需要更新某个状态的一部分。这时，我们不想更新全局状态，因为这会引起大量不必要的重新渲染。
让我们看一个示例，在 Redux 中如何更新对象的属性。
-- ------
----- ------------ - -
----- -
----- --------
---- --
-
--
-- -- -------
-------- ---------------- - ------------- ------- -
------ ------------- -
---- ------------- -
-- -- ---- --- --- --
------ -
---------
----- -
--------------
---- --------------
-
--
-
--------
------ ------
-
-
----- ----- - ------------------------在这个例子中，我们定义了一个名为 updateUser 的 reducer 函数，它处理名为 UPDATE_AGE 的操作并更新用户对象的年龄属性。我们正在使用展开运算符来复制现有状态对象，并在复制的副本上更新值。
使用 Reselect 实现选择器
在许多 Redux 应用程序中，我们可能需要从 store 中获取派生的状态。例如，在我们的示例中，我们可能需要获取用户的全名而不是将名字和年龄分开获取。这时候，我们需要使用选择器模式来维护状态的派生属性。在 Redux 中，有一个名为 Reselect 的包，它使得创建选择器非常容易。
------ - -------------- - ---- ----------- -- -- ---- -- ----- ------- - ----- -- ----------- -- ------- ----- ----------- - --------------- -------- ---- -- ------------- ------------ --
在这个选择器中，我们提取了 user 属性，并使用派生属性计算了全名。我们可以将此选择器传递给 React 组件，并通过 connect() 函数将其链接到 store。
如何使用 React-Redux
React-Redux 是一个官方提供的 Redux 绑定库，它允许我们使用 React 组件轻松地访问 Redux store 和派生状态。React-Redux 提供了两个主要组件：
<Provider>：这是一个高阶组件，它允许我们将 store 传递到组件层次结构中的所有组件。connect()：这是一个函数，它将 React 组件连接到 Redux store。
让我们看看如何使用这两个组件。
------ ----- ---- --------
------ - --------- ------- - ---- --------------
----- ---- ------- --------------- -
-------- -
------ -
-----
--------------------------
-------------------------
------------------------------
------
--
-
-
-- - ----- ------- ----- -
----- --------------- - ----- -- -
------ -
--------------
--------- ------------------
--
--
-- ------ -----
------ ------- -------------------------------在这个代码示例中，我们定义了一个名为 User 的 React 组件，并使用 connect() 函数将其连接到 store。我们还使用 mapStateToProps 函数将 store 状态映射到组件 props 中。这使得我们可以在组件中轻松地访问派生状态。
总结
在本文中，我们介绍了如何实现 Redux 的局部更新，并使用 React-Redux 将其集成到 React 应用程序中。我们还讨论了如何使用 Reselect 来创建选择器，以及如何将 React 组件连接到 Redux store。最后，我们希望本文能帮助初学者更好地理解和使用 Redux。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6478cee7968c7c53b04ef90f