前言
Redux 是一个 JavaScript 应用程序状态容器管理器，是 React 生态系统中最流行的数据流管理工具之一。它解决了一个共享状态管理的问题，是构建大型应用的有力工具。
Redux 原本是为了配合 React 使用而开发的，但是它可以与任何 JavaScript 应用程序一起使用。Redux 通过单向数据流来控制应用程序的状态，它遵循“单一源真相”的理念，即所有应用程序的状态都存储在一个对象中（称为“store”），此状态可被单一地更改和管理。
在本篇文章中，我们将为初学者介绍 Redux 的基础知识，并提供实战案例来帮助你更好地理解。
Redux 基本概念
Redux 的基本概念非常简单，可以分为三个部分：store、action 和 reducer。
Store
Store 是 Redux 的核心，它是一个负责存储所有应用程序状态的对象。Store 对象只有一个，并且可以被应用程序的任何部分访问。Store 中的状态可以通过专门的函数进行修改。
在 Redux 中，我们可以通过 createStore() 方法来创建 Store 对象。
------ - ----------- - ---- -------- ----- ----- - ---------------------
Action
Action 是 Redux 中用于描述发生了什么事件的纯 JavaScript 对象。Action 对象必须包含一个类型（type）属性，用于描述发生的事件类型。这个类型通常是一个字符串常量。
----- ------------- - - ----- ----------- ----- ------ ------- --
Reducer
Reducer 是一个纯函数，用于根据 Action 对象修改存储在 Store 中的状态。每当 Action 对象发生变化时，Redux 会自动调用 Reducer 函数，来更新 Store 中的状态。
Reducer 函数接收两个参数：旧状态（state）和 Action 对象（action）。该函数在不修改旧状态的情况下返回一个新状态。
----- ------------ - ---
-------- --------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
----- -----------
--
--------
------ ------
-
-Redux 实战
现在，我们将进入练习环节，我们将创建一个示例 Todo 应用程序，这将帮助您更好地理解 Redux。
创建 Todo 应用程序
首先，我们将使用 create-react-app 构建一个新的 React 应用程序。在终端中输入以下命令：
--- ---------------- -----------
然后，在 Terminal 中切换到 my-todo-app 目录：
-- -----------
安装 Redux
接下来，我们需要安装 Redux 包：
--- ------- ----- ----------- ------
创建 Store
在 src/index.js 文件中创建 Store：
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ----------- ---- -------------
------ --- ---- -------------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--创建 Action
在 src/actions/index.js 文件中创建新的 Action：
------ ----- -------- - ----------- ------ ----- ------- - ------ -- -- ----- --------- ---- ---
创建 Reducer
在 src/reducers/index.js 文件中创建新的 Reducer：
------ - -------- - ---- -------------
----- ------------ - -
------ --
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------- - ----- ----------- --
--
--------
------ ------
-
-创建组件
现在，我们可以创建两个新的组件：TodoList 和 TodoForm。
TodoList 组件
------ ----- ---- --------
------ - ------- - ---- --------------
----- -------- - -- ----- -- -- -
----
----------------- ------ -- -
--- ----------------------------
---
-----
--
----- --------------- - ------- -- --
------ -----------
---
------ ------- -----------------------------------TodoForm 组件
------ ------ - -------- - ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------
----- -------- - -- ------- -- -- -
----- ----------- ------------- - -------------
----- ------------ - ------- -- -
-----------------------
-------------------
-----------------
--
------ -
----- ------------------------
------ ----------------- ------------- -- ----------------------------- --
------- --------------------------
-------
--
--
------ ------- ------------- - ------- -------------最终结果
现在，我们有了 TodoList 和 TodoForm 组件，它们将一同工作来构建我们的 Todo 应用程序。
在 App 组件中，我们需要使用这两个新组件：
------ ----- ---- --------
------ -------- ---- -------------
------ -------- ---- -------------
----- --- - -- -- -
------ -
-----
-------- ---------
--------- --
--------- --
------
--
--
------ ------- ----运行应用程序
现在，我们可以运行本地开发服务器来查看我们的应用程序：
--- -----
现在，在浏览器中打开 http://localhost:3000，你将看到我们的新的 Todo 应用程序。你可以添加新的任务并在列表中查看它们。
结论
在本篇文章中，我们为初学者详细介绍了 Redux 的基础知识，并提供了一个实战案例来帮助你更好地理解。
Redux 是构建大型应用程序的强大工具，如果你还没有学习过它，请花一些时间了解其基础知识。希望这个教程对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f2bbe5f55128102632612