前言
Redux 是一个用于 JavaScript 应用程序的可预测状态容器。它可以帮助我们管理应用程序的状态，并且在应用程序的整个生命周期内保持一致和可预测。使用 Redux 时，我们可以将应用程序的状态存储在全局存储区中，并使所有组件都可以从中访问和更新它，这样我们就可以方便地管理状态，避免了传递状态的繁琐和混乱。本文将介绍 Redux 中如何实现上传文件功能。
原理
通常情况下，上传文件都是通过表单的形式提交的，但是在 Redux 中，我们需要将上传文件的数据保存到 Store 中。为了实现这个目标，我们可以使用 middleware 来处理上传文件的数据。具体来说，当用户选择文件并上传时，我们可以调用 middleware 来处理上传文件，并将上传的数据保存到 Store 中。当需要使用这些数据时，我们就可以从 Store 中获取它们。
实现
下面是 Redux 中实现上传文件的主要步骤：
1. 在组件中选择和上传文件
使用 HTML input 控件来选择和上传文件，如下所示：
<input type="file" onChange={handleFileUpload} />当用户选择文件并上传时，调用 handleFileUpload 函数。
2. 使用 middleware 处理上传的文件数据
创建 middleware 来处理上传文件，如下所示：
-- -------------------- ---- -------
----- -------------------- - ----- -- ---- -- ------ -- -
-- ------------ --- -------------- -
----- ---------- - --- -------------
---------------------------------------------- -- ------ ---- ---
----------------- - ------- -- -
----------------
----- ----------------------
-------- -
----- -------------------
-
---
--
-
------ -------------
--在这个 middleware 中，我们使用 FileReader 来读取上传的文件，并将数据转换为 Data URL，然后将上传的数据存储到 Store 中。
3. 在组件中将数据从 Store 中加载出来
使用 connect 函数和 mapStateToProps 函数来将上传的数据从 Store 中加载出来。
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- --------------- - ----- -- -
------ -
-------------- -------------------
--
--
------ ------- --------------------------------------4. 在组件中显示上传的文件数据
在组件中使用上传的数据并显示它们。如下所示:
-- -------------------- ---- -------
----- ----------- - -- ------------- -- -- -
------ -
--
----------------------- -- -
---- --------------- --------------- --
---
---
--
--完整示例代码
下面是完整示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
----- ------------ - -
-------------- --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ -
---------
-------------- -
-----------------------
-
----- -------------------------
----- -------------------
-
-
--
--------
------ ------
-
--
----- -------------------- - ----- -- ---- -- ------ -- -
-- ------------ --- -------------- -
----- ---------- - --- -------------
----------------------------------------------
----------------- - ------- -- -
----------------
----- ----------------------
-------- -
----- -------------------
-
---
--
-
------ -------------
--
----- ----- - -------------------- ---------------------------------------
----- ---------------- - ------- -- -
----- ---- - ----------------------
----------------
----- --------------
-------- -
----
-
---
--
----- --------------- - ----- -- -
------ -
-------------- -------------------
--
--
----- ----------- - -- ------------- -- -- -
------ -
--
----------------------- -- -
---- --------------- --------------- --
---
---
--
--
------ ------- --------------------------------------结论
通过这篇文章的学习，我们了解了如何在 Redux 中实现上传文件的功能。通过使用 middleware，我们可以将上传的数据存储到 Store 中，这样就可以方便地管理和使用这些数据。在实际项目中，上传文件是非常常见的功能，因此掌握 Redux 中实现上传文件的方法可以帮助我们更好地开发和管理项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e747ee884a3e30f27641f