如何在 React Native+Redux 中管理全局 Loading 状态

在 React Native 应用中，全局 Loading 状态的管理是一个常见的需求。比如在网络请求时，我们需要显示一个 Loading 动画，以提示用户当前操作正在进行中。在 Redux 中，我们可以利用 action 和 reducer 来管理全局 Loading 状态。

创建 Loading Actions

首先，我们需要创建两个 Loading 相关的 action：

// javascriptcn.com 代码示例
// actionTypes.js
export const SHOW_LOADING = 'SHOW_LOADING';
export const HIDE_LOADING = 'HIDE_LOADING';

// loadingActions.js
import { SHOW_LOADING, HIDE_LOADING } from './actionTypes';

export const showLoading = () => ({
  type: SHOW_LOADING,
});

export const hideLoading = () => ({
  type: HIDE_LOADING,
});

上面的代码中，我们定义了两个 action 类型：SHOW_LOADING 和 HIDE_LOADING。showLoading 和 hideLoading 分别对应着显示和隐藏全局 Loading 的操作。

创建 Loading Reducer

接着，我们需要创建一个 reducer 来处理 Loading 相关的 action：

// javascriptcn.com 代码示例
// loadingReducer.js
import { SHOW_LOADING, HIDE_LOADING } from '../actions/actionTypes';

const initialState = {
  visible: false,
};

export default function loadingReducer(state = initialState, action) {
  switch (action.type) {
    case SHOW_LOADING:
      return {
        ...state,
        visible: true,
      };
    case HIDE_LOADING:
      return {
        ...state,
        visible: false,
      };
    default:
      return state;
  }
}

上面的代码中，我们定义了一个初始状态，其中 visible 属性表示全局 Loading 是否可见。在 reducer 中，我们根据 action 的类型来更新状态。当收到 SHOW_LOADING action 时，我们将 visible 设置为 true；当收到 HIDE_LOADING action 时，我们将 visible 设置为 false。

在 Root Component 中使用 Loading 状态

现在，我们已经定义了 Loading 相关的 action 和 reducer。接下来，我们需要在应用的根组件中使用这些功能。

// javascriptcn.com 代码示例
// App.js
import React, { useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { showLoading, hideLoading } from './actions/loadingActions';

export default function App() {
  const dispatch = useDispatch();
  const loadingVisible = useSelector((state) => state.loading.visible);

  useEffect(() => {
    dispatch(showLoading());
    setTimeout(() => {
      dispatch(hideLoading());
    }, 3000);
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      {loadingVisible ? (
        <ActivityIndicator size="large" />
      ) : (
        <Text>Welcome to React Native!</Text>
      )}
    </View>
  );
}

上面的代码中，我们使用了 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