在 React Native 应用中，全局 Loading 状态的管理是一个常见的需求。比如在网络请求时，我们需要显示一个 Loading 动画，以提示用户当前操作正在进行中。在 Redux 中，我们可以利用 action 和 reducer 来管理全局 Loading 状态。
创建 Loading Actions
首先，我们需要创建两个 Loading 相关的 action：
-- -------------- ------ ----- ------------ - --------------- ------ ----- ------------ - --------------- -- ----------------- ------ - ------------- ------------ - ---- ---------------- ------ ----- ----------- - -- -- -- ----- ------------- --- ------ ----- ----------- - -- -- -- ----- ------------- ---
上面的代码中，我们定义了两个 action 类型：SHOW_LOADING 和 HIDE_LOADING。showLoading 和 hideLoading 分别对应着显示和隐藏全局 Loading 的操作。
创建 Loading Reducer
接着，我们需要创建一个 reducer 来处理 Loading 相关的 action：
-- -----------------
------ - ------------- ------------ - ---- -------------------------
----- ------------ - -
-------- ------
--
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- -------------
------ -
---------
-------- -----
--
---- -------------
------ -
---------
-------- ------
--
--------
------ ------
-
-上面的代码中，我们定义了一个初始状态，其中 visible 属性表示全局 Loading 是否可见。在 reducer 中，我们根据 action 的类型来更新状态。当收到 SHOW_LOADING action 时，我们将 visible 设置为 true；当收到 HIDE_LOADING action 时，我们将 visible 设置为 false。
在 Root Component 中使用 Loading 状态
现在，我们已经定义了 Loading 相关的 action 和 reducer。接下来，我们需要在应用的根组件中使用这些功能。
-- ------
------ ------ - --------- - ---- --------
------ - ----- ----- ----------------- - ---- ---------------
------ - ------------ ----------- - ---- --------------
------ - ------------ ----------- - ---- ---------------------------
------ ------- -------- ----- -
----- -------- - --------------
----- -------------- - ------------------- -- -----------------------
------------ -- -
------------------------
------------- -- -
------------------------
-- ------
-- ----
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
--------------- - -
------------------ ------------ --
- - -
------------- -- ----- --------------
--
-------
--
-上面的代码中，我们使用了 useSelector 钩子来获取 Loading 状态。如果 visible 属性为 true，我们就显示一个 ActivityIndicator 组件，表示正在加载中；否则，我们显示一个欢迎文本。
在 useEffect 钩子中，我们使用 dispatch 函数来触发 showLoading 和 hideLoading action。这里的 setTimeout 函数仅用于模拟异步操作，实际上我们应该在网络请求等异步操作完成后，再触发 hideLoading action。
总结
在本文中，我们介绍了如何在 React Native+Redux 中管理全局 Loading 状态。我们通过创建 Loading 相关的 action 和 reducer，然后在根组件中使用 useSelector 钩子来获取 Loading 状态。最后，我们在 useEffect 钩子中使用 dispatch 函数来触发相应的 action。
这种方法可以帮助我们在应用中方便地管理全局 Loading 状态，提高用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656c1ea4d2f5e1655d48691a