在前端开发中，Redux 是一种常用的状态管理工具，它通过 Store 存储应用的数据，并提供了一组 API 来修改 Store 中的数据。然而，在实际的开发中，由于 Redux Store 每次数据更新都会触发组件的重新渲染，频繁的对 Store 的访问可能会导致性能问题。因此，本文将介绍 Redux 性能优化的一种实践方法——减少对 Store 的访问。
为什么要减少对 Store 的访问？
Redux 的 Store 存储着应用的数据，每次数据更新后，所有使用该数据的组件都会进行重新渲染。因此，频繁的对 Store 的访问会导致大量的组件重新渲染，从而降低应用的性能。
另一方面，对 Store 的访问也可能会导致应用的逻辑复杂性增加。如果一个组件需要访问多个 Store 的数据，那么在组件中处理这些数据可能会使其变得复杂和难以维护。
因此，减少对 Store 的访问是一种优化 Redux 性能和简化应用逻辑的有效方法。
如何减少对 Store 的访问？
1. 使用 mapStateToProps 和 mapDispatchToProps
在 Redux 中，我们可以使用 mapStateToProps 和 mapDispatchToProps 这两个方法将 Store 中的数据和修改数据的 action 分别映射到组件的 props 中，这样组件就可以通过 props 来获取数据和调用 action 来修改数据，而不需要直接访问 Store。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- ------------
----- ------- - -- ------ ---------- --------- -- -- -
-----
--------- -----------
------- --------------------------------------
------- --------------------------------------
------
--
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -
----------
----------
--
------ ------- ------------------------ -----------------------------在上面的示例中，我们通过 connect 方法将 Counter 组件与 Store 进行连接，并将 count 和 increment、decrement 两个方法分别映射为 props。这样组件就可以通过访问 props.count 来获取 count 数据，通过调用 props.increment 或 props.decrement 回调来修改 count 数据，而不需要直接访问 Store。
2. 按需加载数据
有时候我们可能只需要 Store 中某个部分的数据，而不是全部数据。在这种情况下，我们可以使用 Redux 中间件来实现按需加载数据。
Redux-thunk 是一种常用的 Redux 中间件，它可以让我们在 action 中返回一个函数，该函数可以异步获取数据并 dispatch action 来更新 Store 数据。因此，我们可以在需要使用数据的组件中调用相应的 action 来获取数据，而不是在组件中直接访问 Store 中的数据。
-- -------------------- ---- -------
-- ----------
------ ----- ---------- - -- -- ----- -------- -- -
----- -------- - ----- --------------------
----- ----- - ----- ----------------
---------- ----- ------------ -------- ----- ---
--
-- ------------
----- --------- - -- ------ ---------- -- -- -
------------ -- -
-------------
-- ----
------ -
----
--------------- -- -
--- -------------------------------
---
-----
--
--
----- --------------- - ----- -- --
------ ------------
---
------ ------- ------------------------ - ---------- --------------在上面的示例中，我们定义了 fetchPosts action，它会异步获取 posts 数据并 dispatch FETCH_POSTS action 来更新 Store 数据。在组件中，我们通过调用 props.fetchPosts 回调来获取 posts 数据，而不是直接访问 Store 中的数据。
3. 进行数据规范化
当 Store 中的数据结构变得复杂时，我们可能需要访问多个 Store 的数据来完成某个操作。在这种情况下，我们可以考虑对 Store 数据进行规范化，使得需要访问的数据可以通过一个单独的访问路径来获取，从而避免了访问多个 Store 的数据。
-- -------------------- ---- -------
-- ----------
------ ----- ---------- - -- -- ----- -------- -- -
----- -------- - ----- --------------------
----- ----- - ----- ----------------
----- --------- - ------------------ ----- -- --
-------
---------- -----
--- ----
---------- ----- ------------ -------- ----- ---
---------- ----- ------------------ -------- --------- ---
--
-- -------
----- ---- - -- ----- ---- -- -- -
-----
---------------------
------------------
---------- ---------------
------
--
----- --------------- - ------- --------- -- --
----- -----------------------------
----- -----------------------------------------------------
---
------ ------- -------------------------------在上面的示例中，我们定义了 fetchUsers action，它会异步获取 users 数据并 dispatch FETCH_USERS 和 FETCH_USERS_BY_ID 两个 action 来更新 Store 数据，其中 FETCH_USERS_BY_ID 用来将 users 数据规范化为以 id 为键的对象。在组件中，我们只需要通过访问 props.post 和 props.user 来获取 post 和 user 数据，而不需要直接访问 Store 中的数据。
总结
在 Redux 应用中，减少对 Store 的访问是一种优化性能和简化应用逻辑的有效方法。通过使用 mapStateToProps 和 mapDispatchToProps、按需加载数据以及进行数据规范化等技术，我们可以减少对 Store 的访问，从而提高应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e48e6ff6b2d6eab30051ed