在 Redux 应用中，初始化问题是一个常见的挑战。具体而言，当我们在页面加载时需要从服务器获取数据初始化 Redux store 时，我们需要解决以下问题：
- 如何在 store 初始化之前获取数据？
- 如何在数据加载完成后，将数据保存到 store 中？
- 如何处理数据加载失败的情况？
在本文中，我们将探讨如何解决这些问题，并介绍一个最佳实践示例。
解决方案
我们可以通过在应用中添加一个初始化过程来解决这些问题。初始化过程可以在以下几个步骤中完成：
- 发起数据请求
- 将请求的数据保存到 store 中
- 根据请求的结果，更新应用状态
我们可以使用 Redux 中间件来实现这个过程。具体而言，我们可以编写一个中间件，它将拦截初始化 action，并在这个过程中执行上述步骤。
以下是一个示例中间件：
-- -------------------- ---- -------
------ - ---------- ----------------- ---------------- - ---- ------------
------ ----- -------------- - -- -------- -- -- ---- -- ------ -- -
-- ------------ --- ------- -
----------------------
------ -----------
---------- -- -
---------------------------------
--
------------ -- -
----------------------------------
---
-
------ -------------
--在这个示例中间件中，我们首先检查 action 的类型是否为 INIT。如果是，我们将调用 fetchData action，并使用 Promise 来处理请求的结果。如果请求成功，我们将调用 fetchDataSuccess action，将数据保存到 store 中。如果请求失败，我们将调用 fetchDataFailure action，并将错误信息保存到 store 中。
现在我们可以在应用中使用这个中间件。以下是一个示例 store 配置：
import { createStore, applyMiddleware } from 'redux';
import { initMiddleware } from './middleware';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(initMiddleware));现在，我们可以在应用中派发一个 INIT action，来触发初始化过程。以下是一个示例组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- - ---- --------------
----- --- - -- -- -
----- -------- - --------------
------------ -- -
---------- ----- ------ ---
-- ------------
------ ------- ----------
--
------ ------- ----在这个示例组件中，我们使用 useEffect hook 来在组件加载时派发 INIT action。
结论
在 Redux 应用中，初始化问题是一个常见的挑战。通过使用 Redux 中间件，我们可以轻松地解决这个问题。在本文中，我们介绍了一个最佳实践示例，帮助你更好地理解如何解决初始化问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67444488c22b09372b114fd9