在 React Native + Redux 项目中如何做到全局的 Loading 状态管理
在 React Native + Redux 项目中，我们经常需要处理各种异步操作，比如网络请求、读取本地数据等等。这些操作需要一定的时间，期间应该显示一些 Loading 状态，以提示用户当前操作正在进行中。如果每个组件都自己管理 Loading 状态，会增加代码量和复杂度。因此，我们可以通过 Redux 来实现全局的 Loading 状态管理。
一、在 Redux 中定义 Loading 状态
首先，在 Redux 中定义一个 Loading 状态，用于表示当前是否处于 Loading 状态。我们可以将其定义为一个布尔值，true 表示正在加载，false 表示加载完成。在 Redux 的 state 中，我们可以定义一个 loading 属性来表示 Loading 状态。
示例代码：
-- -------------------- ---- -------
----- ------------ - -
-------- -----
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------------
------ - --------- -------- -------------- -
--------
------ -----
-
-
------ ------- -------在上面的代码中，我们定义了一个 reducer 函数，处理 SET_LOADING action。当 SET_LOADING action 被触发时，我们将 loading 属性设置为 action.payload。
二、在组件中使用 Loading 状态
接下来，我们需要在组件中使用 Loading 状态。我们可以使用 react-redux 提供的 connect 函数，将 Loading 状态映射到组件的 props 上。在组件中，我们可以根据 Loading 状态来显示或隐藏 Loading 组件。
示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ----- ----- ----------------- - ---- --------------
------ - ------- - ---- -------------
----- ----------- ------- --------- -
-------- -
----- - ------- - - ----------
------ -
------
-------- -- ------------------ ---
-------- ----------------
-------
-
-
-
----- --------------- - ----- -- --
-------- -------------
--
------ ------- -------------------------------------在上面的代码中，我们定义了一个 MyComponent 组件，使用 connect 函数将 Loading 状态映射到组件的 props 上。在组件中，我们根据 Loading 状态来显示或隐藏 ActivityIndicator 组件。
三、触发 Loading 状态
最后，我们需要触发 Loading 状态。当我们发起一个异步操作时，我们可以在操作开始时将 Loading 状态设置为 true，在操作结束时将 Loading 状态设置为 false。
示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- -----------
-------- ----------- -
------ -------- -- -
--------------------------
-----------------------------------------------------
-------------- -- ----------------
---------- -- ------------------
----------- -- ----------------------------
-
-在上面的代码中，我们定义了一个 fetchData 函数，使用 Redux 的 dispatch 函数触发 SET_LOADING action，将 Loading 状态设置为 true。然后，我们发起一个网络请求，请求完成后，使用 finally 回调函数将 Loading 状态设置为 false。
结论
通过上面的步骤，我们可以在 React Native + Redux 项目中实现全局的 Loading 状态管理。这样，我们就可以避免在每个组件中都手动处理 Loading 状态，减少了代码量和复杂度。同时，更好地提高了用户体验。
参考资料
- React Native
- Redux
- React Redux
- React Native ActivityIndicator
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673f11665ade33eb722da301