在大多数 React Redux 应用程序中，我们需要从服务器端获取一些数据来初始化应用程序。在本文中，我们将讨论从哪里获取这些初始数据以及如何在 React Redux 中进行处理。
1. 组件 componentDidMount 生命周期方法
可能最常见的方式是在组件的 componentDidMount 生命周期方法中获取初始数据。在此方法中，我们可以使用 fetch 或类似工具来获取数据，并将其存储在 Redux store 中。
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ----------- ------- --------- -
------------------- -
-----------------------
-
-------- -
------ ------- ----------------
-
-
------ ------- ------------- - --------- ----------------在上面的示例中，fetchData 是一个 Redux action，该 action 将使用 fetch 方法从服务器获取数据并将其存储在 Redux store 中。
虽然这种方式很常见，但它也有一些缺点。例如，如果我们有多个组件都需要相同的初始数据，那么我们可能会重复地在每个组件中调用 fetchData，这样的代码会变得冗长、维护困难。
2. 使用 Redux middleware
另一种获取初始数据的方式是使用 Redux middleware。通过创建一个自定义的 Redux middleware，我们可以拦截到发起的所有 action，然后在需要时获取数据并将其存储在 Redux store 中。
------ - ---------- - ---- ----------------
------ - ----------- - ---- ------------
----- ------------------- - -- -------- -- -- ---- -- ------ -- -
-- ------------ --- ----------- -
------------------
-------------- -- ----------------
---------- -- -
----------------------------
---
-
------ -------------
--
------ ------- --------------------在上面的示例中，fetchDataMiddleware 是一个自定义的 Redux middleware，它会拦截到所有 FETCH_DATA action 并从服务器获取数据。然后它将使用 receiveData action 将数据存储在 Redux store 中。
使用 Redux middleware 的好处是我们只需要在应用程序中注册一次 middleware，就可以确保每个组件都能访问到初始数据，这样可以避免重复代码和维护困难的问题。
3. 使用 React Suspense 和 React.lazy
还有一种现代的方式可以获取初始数据——React Suspense 和 React.lazy。这两个功能结合起来可以使我们更轻松地管理异步数据的加载和显示。
------ ------ - ----- -------- - ---- --------
----- ----------- - ------- -- -------------------------
-------- ----- -
------ -
--------- ---------------------------------
------------ --
-----------
--
-
------ ------- ----在上面的示例中，MyComponent 是一个由 React.lazy 加载的组件，它将在 Suspense 组件中显示。如果组件需要异步加载数据，我们可以在组件内部使用 React Suspense 和 useEffect hook.
------ - ---------- -------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
-------- ------------- -
----- -------- - --------------
----- ---- - ----------------- -- ------------
------------ -- -
----------------------
-- ------------
------ -
-----
----- - -
-------- ------- ---- ---------
- - -
---------------------
--
------
--
-
------ ------- ------------在上面的示例中，我们在 MyComponent 内使用 useEffect hook 调用 fetchData action 来获取数据。我们还通过 useSelector hook 从 Redux store 中获取数据，并在组件内部渲染它。
使用 React Suspense 和 React.lazy 的好处是我们可以
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31415