Redux 和 React 是现代前端开发中不可避免的两大技术。Redux 是一个可预测的状态容器，React 是一个用于构建用户界面的 JavaScript 库。Redux 和 React 框架集成可以让我们更灵活地管理 React 应用的数据流和状态，并且可以使我们的应用更加可靠和高效。本文将介绍 Redux 和 React 的集成方法，并提供一些示例代码。
Redux 的使用
Redux 建立在三个基本原则上：单一数据源、状态只读和状态变更只能通过纯函数进行。Redux 的核心就是一个状态库，用于存储应用程序运行时所需的数据。Redux 中的任何更改都需要通过一个称为「action」的对象来描述，并用「reducer」函数来处理它们，并返回新的状态对象。虽然这听起来复杂，但 Redux 为我们提供了「中间件」来使应用变得更加可预测和易于维护。
在使用 Redux 的过程中，我们需要安装 redux 和 react-redux 库。 redux 库是 Redux 的核心库， react-redux 库则是用于在 React 应用中使用 Redux 库的库。
npm install redux react-redux --save
接下来我们需要建立 Redux 应用的基本结构。Redux 应用通常由多个文件组成，包括「reducers」、「actions」和「store」。reducers 这个文件夹中存放的是 Redux 应用的所有场合的「reducers」函数， actions 中存储了所有的「actions」，store 则负责将所有的「reducers」、状态创建成一个可供 React 组件访问的状态库。以下是 Redux 应用的基本结构：
-- -------------------- ---- ------- -- ------------ ------ - ------------ ---------------- --------------- - ---- -------- ------ ----- ---- -------------- -- ------ -------- ------ ----------- ---- ------------------------- ----- ----------- - ----------------- ----- ------------ --- ----- ----- - ------------------------ ------------------------ ------ ------- ------
-- -------------------- ---- -------
-- ---------------------------
------ - --------- ------------ ----------- - ---- -------------------------
----- ------------ - ---
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
-
--- ------------ - --
----- --------------------
---------- ------
--
--
---- ------------
------ ---------------- --
------- --- ----------------- - - -------- ---------- --------------- - - ----
--
---- ------------
------ ------------------- -- ------- --- -------------------
--------
------ ------
-
--
------ ------- -------------- -------------------- ---- -------
-- --------------------------
------ ----- -------- - -----------
------ ----- ----------- - --------------
------ ----- ----------- - --------------
------ ----- ------- - ------ -- -
------ -
----- ---------
-------- -
-----
--
--
--
------ ----- ---------- - ---- -- -
------ -
----- ------------
-------- -
---
--
--
--
------ ----- ---------- - ---- -- -
------ -
----- ------------
-------- -
---
--
--
--React 与 Redux 集成
通过 react-redux 库，我们可以把 Redux 状态库的数据映射到 React 组件的 props 中。Redux 需要使用 Provider 组件包裹根组件，再通过 connect 函数将组件连接到 Redux。以下是一个简单的示例，展示了一个显示“增加”、“删除”按钮的待办列表。每当我们点击“增加”按钮时，就会调用 Redux 的 addTodo 函数来更新状态库。
-- -------------------- ---- -------
-- --------------------------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- ----------- ---------- - ---- -------------------------
----- -------- ------- --------------- -
----------- - -- -- -
----- ---- - ---------------------
-------------------------
--
------------ - ---- -- -
--------------------------
--
------------ - ---- -- -
--------------------------
--
-------- -
------ -
-----
------ ----------- ---------- --
------- ---------------------------------------
----
--------------------------- -- -
--- --------------
------------- --
------- ----------- -- --------------------------------------------- --
------- ----------- -- -------------------------------------------
-----
---
-----
------
--
-
-
----- --------------- - ------- -- -
------ -
----- -----------
--
--
----- ------------------ - ---------- -- -
------ -
-------- ------ -- ------------------------
----------- ---- -- -------------------------
----------- ---- -- -------------------------
--
--
------ ------- ------------------------ -------------------------------- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--总结
Redux 和 React 的集成可以使我们更好地管理数据流和状态，并使我们的应用更加可预测和高效。Redux 在前端开发中的地位越来越重要，很多流行的 JavaScript 库和框架都在逐步集成Redux。我们可以使用 Redux 来创建大型复杂的应用，同时保持代码的可维护性。本文提供了一个基本的 demo，帮助初学者了解 Redux 和 React 的集成方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451d0a0675af4061b590d38