React 可以让我们构建可组合的、高度可维护的用户界面，但是实际中我们需要大量的组件来实现一些复杂的业务逻辑。这些组件需要共享状态和行为，并随着应用程序的复杂性而增长，这使得管理应用程序状态变得非常困难。这时，Redux 就成了一个很好的解决方案。
本文将介绍 Redux 是什么以及如何使用它来优化你的 React 应用程序的性能。
Redux 简介
Redux 是一个状态管理库，提供了一种可预测的状态管理方式，适用于所有 JavaScript 应用程序，无论是 React、Angular、Vue 还是原生 JavaScript 应用。
Redux 的核心思想是在一个全局状态树中管理应用程序的状态。它是一个单向数据流，所有的状态更改都是由 actions 触发的。你可以将 actions 想象成一个指令，告诉 Redux 应用程序需要执行什么操作，例如添加一个待办事项或者删除一篇文章。Reducer 函数将 actions 映射到新的状态对象，并通知所有订阅者状态的更新。
Redux 通过强制实行单向数据流，保持了应用程序的可预测性，并提供了一些工具来帮助我们容易地进行状态管理。接下来我们将介绍如何将 Redux 引入 React 应用程序中。
在 React 应用程序中使用 Redux
使用 Redux 优化一个 React 应用程序的一般工作流程如下：
在应用程序中定义 Redux store：在整个应用程序中组织和管理状态。
创建 action 和 reducer：状态更改的所有操作都是由 action 触发的，而 reducer 将 action 映射到新的状态对象。
将 Redux store 发送到 React 应用程序中：通过 Provider 组件在组件树中传递 store。
使用 React 组件来连接到 Redux store 中的数据：利用 connect 函数完成，这是一个从 store 中提取数据的高阶函数。
定义 Redux store
首先，我们需要定义一个 Redux store，它是一个对象，包含应用程序中所有的状态数据。在 React 应用程序中使用 Redux，你需要安装 React 和 Redux，然后引入它们：
import { createStore } from 'redux'使用 createStore 来定义 Redux store，例如：
const store = createStore(reducer)
在这里，reducer 是一个函数，接受一个 action 和当前状态作为参数，并返回一个新的状态。我们将在下一段中介绍 reducer 的更多细节。
创建 action 和 reducer
在 Redux 中，所有状态更改都是由 actions 触发的。例如，我们可以定义一个 ADD_TODO action 来添加待办事项：
{
type: 'ADD_TODO',
payload: {
text: 'Learn Redux',
completed: false
}
}我们可以通过 dispatch，来将 action 传递给 reducer 处理。
store.dispatch({
type: 'ADD_TODO',
payload: {
text: 'Learn Redux',
completed: false
}
})在 reducer 中，我们可以通过查看 action 的 type，来决定如何处理 action。例如，我们可以处理 ADD_TODO action，做如下事情：
-- -------------------- ---- -------
-------- ------------------ - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
----- --------------------
---------- ------
-
-
--------
------ -----
-
-在这里，我们使用了展开操作符，来将新增待办事项添加到当前的待办事项列表中。
将 Redux store 发送到 React 应用程序中
在 React 应用程序中使用 Redux，需要将创建的 store 发送给组件树中的子组件。在组件树种的所有组件中，只需要一个组件来处理 store，为了将 store 发送到子组件，我们可以使用 React 的 Provider 组件。
-- -------------------- ---- -------
------ - -------- - ---- -------------
------ ----- ---- ---------
-------- ----- -
------ -
--------- --------------
------ --
-----------
-
-这里，App 组件包含一个 Todos 组件，Provider 组件包含 store 对象。
使用 React 组件来连接到 Redux store 中的数据
使用 Redux 后，可以通过 connect 高阶函数连接到 store 中的数据，使其成为组件的 props。使用 mapStateToProps，我们可以指定组件所依赖的 store 数据，例如：
function mapStateToProps(state) {
return {
todos: state.todos
}
}
export default connect(mapStateToProps)(Todos)在这里，Todos 组件将会依赖从 state 中提取的 todos 数据，它将从 store 对象和 mapStateToProps 函数获取。
示例
下面是一份完整的示例代码，它实现了一个简单的待办事项应用程序，包括添加、删除和标记完成待办事项：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----------- - ---- -------
------ - --------- ------- - ---- -------------
-- -------
----- ------- - ------ -- --
----- -----------
-------- -
-----
---------- -----
-
--
----- ---------- - ---- -- --
----- --------------
-------- - -- -
--
----- ---------- - ---- -- --
----- --------------
-------- - -- -
--
-- -------
-------- ------------------ - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
--- -----------
----- --------------------
---------- -------------------------
-
-
---- --------------
------ ----------------- -- ------- --- ------------------
---- --------------
------ -------------- --
------- --- ----------------- - - -------- ---------- --------------- - - ----
-
--------
------ -----
-
-
-- -----
----- ----- - -------------------------
-- ----------
-------- ------------- ------- -- -
----- ------ -------- - ------------------
----- ------------ - ------- -- -
----------------------
-------------
-----------
-
------ -
----- ------------------------
------ ----------- ------------ ----------------- -- ---------------------------- --
------- ----------------- -------------
-------
-
-
-------- ----------- ------ ----------- ---------- -- -
-- --------------- -
------ ----- ----- --------
-
------ -
----
--------------- -- -
--- --------------
-------
------
---------------
------------------------
------------ -- --------------------
--
-----------
--------
------- ----------- -- -------------------------------
-----
---
-----
-
-
----- --------------- - ------- -- --
------ -----
--
----- ------------------ - -
--------
-----------
-----------
-
----- ------------------ - ------------------------ ------------------------------
-------- ----- -
------ -
--------- --------------
-----
---------------
------------
--------------- -- ------------------------------
--
------------------- --
------
-----------
-
-
------ ------- ---总结
在本文中，我们介绍了 Redux 是什么以及如何在 React 应用程序中使用它。使用 Redux，你可以更好地组织和管理状态，并提供了一些工具来帮助你的应用程序保持可预测性和可维护性。我们提供了一个简单的示例代码，让你更好地理解如何使用 Redux。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6456dc46968c7c53b09c977a