随着 Web 应用程序日益复杂，如何管理数据和状态成为了一种非常重要的挑战。Redux 是一个独立的状态管理库，它让数据和状态的管理变得简单和可控。
在本文中，我们将通过图示的方式来学习 Redux 的核心概念，通过深入的示例代码来了解如何使用 Redux 来管理状态。
Redux 基础概念
Store
Store 是一个包含应用程序状态的对象。它是 Redux 中的核心概念，用于存储应用程序中的全部状态。
import { createStore } from "redux";
const store = createStore(reducer);
console.log(store.getState());
// {}Action
Action 是一个简单的 JavaScript 对象，表示一个特定应用程序中的事件。
const ADD_TODO = "ADD_TODO";
const action = {
type: ADD_TODO,
payload: {
text: "Learn Redux",
},
};Reducer
Reducer 是一个纯函数，接受先前的状态和当前的操作，返回修改后的状态。
-- -------------------- ---- -------
----- ------------ - -
------ ---
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
------ ---------------- ---------------------
--
--------
------ ------
-
-Redux 工作方式
Dispatch
Dispatch 是一个将 Action 分发给 Reducer 的方法。
-- -------------------- ---- -------
----- ------ - -
----- ---------
-------- -
----- ------ -------
--
--
-----------------------
------------------------------
-- - ------ ------- ------- -Subscribe
Subscribe 是一个注册回调函数，用于在 Store 中的状态发生变化时进行通知。它可以用于更新 UI 或执行其他操作。
-- -------------------- ---- -------
------------------ -- -
------------------------------
---
----- ------ - -
----- ---------
-------- -
----- ------ -------
--
--
-----------------------
-- - ------ ------- ------- -Redux 示例代码
准备工作
在开始构建示例之前，请确保您已安装以下软件包：
- react：构建用户界面的 JavaScript 库。
- react-dom：用于将 React 渲染到 HTML。
- redux：实现状态管理的 JavaScript 库。
- react-redux：将 React 与 Redux 集成的 JavaScript 库。
示例一：计数器应用
这是一个简单的示例，其中有两个按钮（加号和减号），用于增加和减少一个计数器的值。使用 Redux 之前，我们将在组件之间通过 props 和回调函数传递状态。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
----- - - ------ - --
--------- - -- -- -
----- - ----- - - -----------
--------------- ------ ----- - - ---
--
--------- - -- -- -
----- - ----- - - -----------
--------------- ------ ----- - - ---
--
-------- -
----- - ----- - - -----------
------ -
-----
---------- ------------
------- -----------------------------------
------- -----------------------------------
------
--
-
-
------ ------- --------现在，让我们使用 Redux 重新实现计数器应用。我们将在 Store 中存储计数器的值，使用 Reducer 来管理它，通过 actions 来分发状态，使用 react-redux 将其集成到组件中。此外，我们还将使用 TypeScript 来增强代码的类型安全性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------- ------- - ---- --------------
---- ------------ - -
------ -------
--
---- --------------- - -
----- ------------
--
---- --------------- - -
----- ------------
--
---- ------------- - --------------- - ----------------
----- ------------- ------------ - -
------ --
--
-------- ------------- - ------------- ------- --------------- ------------ -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
---- ----- - -
------ -------
---------- -- -- -----
---------- -- -- -----
--
----- ------- ------- ---------------------- -
-------- -
----- - ------ ---------- --------- - - -----------
------ -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
-
-
----- --------------- - ------- ------------- -- --
------ ------------
---
----- ------------------ - -
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
----- ---------------- - ------------------------ -----------------------------
----- --- - -- -- -
--------- --------------
----------------- --
-----------
--
------ ------- ----示例二：代办事项应用
这是一个更复杂的示例，其中包含一个可以输入新任务的输入框和一个任务列表。用户可以添加和删除任务。使用 Redux 之前，我们将在组件之间通过 props 和回调函数传递任务列表和状态。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
----- - - ------ --- ----- -- --
----------------- - ------- -- -
--------------- ----- ------------------ ---
--
------------- - -- -- -
----- - ------ ---- - - -----------
----- -------- - ---------- - ---- ---
--------------- ------ --------- ----- -- ---
--
---------------- - ------- -- -
----- - ----- - - -----------
----- -------- - ---------------- -- -- - --- -------
--------------- ------ -------- ---
--
-------- -
----- - ------ ---- - - -----------
------ -
-----
--------------
----
----------------- ------ -- -
--- ------------
------------- --
------- ----------- -- ----------------------------------------
-----
---
-----
-----
------ ------------ --------------------------------- --
------- -------------------------------- -------------
------
------
--
-
-
------ ------- ---------现在，让我们使用 Redux 重新实现代办事项应用。我们将在 Store 中存储任务列表，使用 Reducer 来管理它，通过 actions 来分发状态，使用 react-redux 将其集成到组件中。此外，我们还将使用 TypeScript 来增强代码的类型安全性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- -------- - ---- --------------
---- ---- - -
----- -------
--
---- ------------- - -
------ -------
----- -------
--
---- ------------- - -
----- -----------
-------- -----
--
---- ---------------- - -
----- --------------
-------- -------
--
---- -------------- - ------------- - -----------------
----- ------------- ------------- - -
------ ---
----- ---
--
-------- ------------- - ------------- ------- ---------------- ------------- -
------ ------------- -
---- -----------
------ - --------- ------ ---------------- --------------- --
---- --------------
------ -
---------
------ ---------------------- -- -- - --- ----------------
--
--------
------ ------
-
-
----- ----- - ---------------------
---- --------- - -
----- -----
----------- -- -- -----
--
----- ----- ------------------- - -- ----- ---------- -- -- -
----
----------- ------- -------------------------------
-----
--
---- ----- - -
------ -------
----- -------
-------- -- -- -----
------------------ ------- ------------------------------------ -- -----
--
----- --------- --------------- - --
------
-----
--------
------------------
-- -- -
-----
--------------
----
----------------- ------ -- -
-----
-----------
-----------
-------------- -- ---------------- ----- -------------- -------- ----- ---
--
---
-----
-----
------ ------------ ---------------------------- --
------- --------------------- -------------
------
------
--
----- --------------- - ------- -------------- -- --
------ ------------
----- -----------
---
----- ------------------ - -
-------- -- -- --
----- -----------
-------- - ----- --------------------- --
---
------------------ ------- ------------------------------------ -- --
----- --------------
-------- -------------------
---
--
----- ----------------- - ------------------------ ------------------------------
----- --- - -- -- -
--------- --------------
------------------ --
-----------
--
------ ------- ----初学者常见问题
- Q: Redux 是否必须使用 TypeScript？ A: 不。Redux 可以与 JavaScript 一起使用。使用 TypeScript 可以增强代码的类型安全性。
- Q: Redux 是否可与 React 以外的框架一起使用？ A: 是的。Redux 可以与任何 JavaScript 应用程序一起使用。
- Q: Redux 是否解决了其他状态管理库无法解决的问题？ A: 不完全。Redux 并不是万能的，它提供了一种可维护的状态管理模式。在某些情况下，可能需要使用其他库或实现自己的状态管理解决方案。
结论
Redux 是一个非常强大的状态管理库，可以让数据和状态的管理变得简单和可控。本文通过图示的方式深入浅出地介绍了 Redux 的核心概念，并提供了详细的示例代码。希望本文可以帮助您更好地理解和使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b57aad91dce0dc8899b37