Redux 作为前端状态管理库，在现代 Web 开发中必不可少。它提供了一种可预测性的状态管理机制，是 React 组件开发的理想解决方案。然而，在实践应用中，Redux 也会出现一些问题。本文将就一些热门问题进行解答，并给出优化方案和示例代码，帮助大家更好地应用 Redux。
1. Redux 与后端交互时，如何处理异步请求？
在大多数情况下，前端需要向后端发送异步请求，获取数据后更新 Redux state 。Redux 的 thunk 中间件就是用来处理这种异步请求的。
例如，假设我们需要从后端获取用户列表并展示在页面上。我们首先定义一个 action 类型和 action。在 action creator 中调用异步函数获取数据并在获取数据成功后 dispatch 一个成功 action：
-- -------------------- ---- -------
-- --------------
------ ----- ------------------- - ----------------------
-- -----------------
------ --------------------- ---- ----------------
------ -------- ------------ -
------ ---------- -- -
------ ---------------
-------------- -- ----------------
---------- -- -
----------
----- --------------------
-------- ----
---
---
--
-然后在 reducer 中更新 state：
-- -------------------- ---- -------
-- -----------
------ --------------------- ---- ----------------
------ ------- -------- -------------- ------- -
------ ------------- -
---- --------------------
------ -
---------
------ --------------
--
--------
------ ------
-
-这样，在组件中调用 fetchUsers action creator 后，Redux store 中的 users 属性值就会被更新。
2. 在大型应用中，如何管理 Redux state 的结构？
尤其在大型应用中，Redux state 往往非常复杂。Redux 提供了一个类似于树状结构的 state 对象，将不同的 reducer 及其 state 分别存储在不同的字段下。然而，如果不做好规划划分，Redux state 很快就会变得难以维护。
我们可以通过将 state 如进一步拆分为更小的块，使得其更加可管理。例如，一个在线购物应用的 Redux state 可以分为如下的几个子状态：
{
cart: {...},
products: {...},
accounts: {...},
...
}如果拆分子状态后，每个状态都有自己的 reducer 和 actions，可以更好地跟踪代码和调试。
3. 单一 Redux store 是否永远足够？
我们可能需要单一的 Redux store 来存储应用状态，但并不意味着一定要把所有的状态都放在这个 store 中。有时，我们可能需要使用多个 Redux 存储。
例如，如果应用中有一个可拖拽的弹出窗口手机用户习惯，我们可以将它的状态存储在单独的 Redux store 中，以避免干扰应用的其他部分。又或者，某些页面仅需要页面状态，我们可以将其状态单独存储。
同时，要注意保持多个 Redux store 的数据同步。库 redux-batched-subscribe 可以帮助我们完成这一功能。
4. Redux 如何处理大数据集？
在处理大数据集时，Redux 可能会遇到性能问题。在这里提供一个优化方案。
例如，我们有几百项文本数据需要大量处理，然后存储到 Redux state 中。我们可以将数据存储在 IndexedDB 中，并通过自定义中间件将数据从 IndexedDB 来回同步到 Redux store。
-- -------------------- ---- -------
-- --------- ----
----- -- - --- --------------
---------------------- -------- ---- -------- ---
----------
------ -------- ------------------ -
------ --- ----------------- ------- -- -
----------- ----------- -- -- -
----------------------------------
--
---------------
---
-
------ -------- --------------------- -
------ --- ----------------- ------- -- -
----------- ----------- -- -- -
--------------------------------------
--
---------------
--
-
-- --- -- -------
------ - -- ---------------- ---- -----------------------------
------ -------- ---------- -
------ ----- ---------- -- -
----- ---- - ----- -------------------
-- -------------- -
--------------------------- ---
----------------------------------------------
---
-------
-
----------------------------------------------
--
-
------ -------- ---------- -
------ ----- -- -- -
----- ----------------------
--
-
-- --------- ---
------ - -- ---------------- ---- -----------------------------
------ - ---- - ---- --------------------------
------ - ---------------- - ---- ---------------------
------ ----- ------------------- - -- -------- -- -- -
--- -------- - ------
--- --------- - ------
------ ---- -- ----- ------ -- -
----- - ----- ------- - - -------
-------------
-- ----- --- -------------------------- -- --------- -- ----------- -
--------- - -----
----- ---- - ----- -------------------
-- -------------- -
--------- - ------
--------------------
-------
-
-------- - -----
--------- - ------
------------------------------------------
-
--
--
通过以上方式，我们可以将大数据集存储在 IndexedDB 中，同时通过自定义中间件将数据同步到 Redux store 中，避免了数据过大对应用性能的影响。
5. Redux 是否适合所有项目？
尽管 Redux 已经成为前端开发工具箱的一部分，但这并不意味着 Redux 适用于所有项目。Redux 在许多方面提供了优秀的支持，但随着应用规模的增加其复杂程度也在增加，可能会导致项目变得难以管理。Redux 最适合的应用场景是应用拥有大量相互关联的状态，并且需要进行复杂的状态更新和处理的情况。
对于一些小的项目，使用原生的 React state 或其他的库则可能会更加适合。
结论
在本文中，我们解答了一些 Redux 常见的问题，并提供了相应的优化方案和示例代码。我们可以通过学习这些问题和解决方案，更好地应用 Redux 并优化我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ea9c1eedcc8a97c8a65f4