Redux 应用中如何管理全局的 Loading 状态

在前端开发中，我们经常会遇到需要在异步请求数据时显示 Loading 状态的需求。在 React 应用中，我们可以使用 Redux 来管理全局的 Loading 状态。

Redux 简介

Redux 是一个可预测的状态容器，用于 JavaScript 应用程序的管理。它通过使用单一的不可变对象来管理应用程序的状态，使得应用程序的状态变得可预测且易于调试。

Redux 的核心概念包括：

• Store：存储应用程序的状态
• Action：描述应用程序中发生的事件
• Reducer：处理状态的改变

管理全局的 Loading 状态

在 Redux 应用中，我们可以通过添加一个全局的 Loading 状态来管理异步请求数据时的 Loading 状态。下面是一个示例代码：

// javascriptcn.com 代码示例
// 定义 action 类型
const START_LOADING = 'START_LOADING';
const STOP_LOADING = 'STOP_LOADING';

// 定义 action creator
const startLoading = () => ({
  type: START_LOADING,
});

const stopLoading = () => ({
  type: STOP_LOADING,
});

// 定义 reducer
const loadingReducer = (state = false, action) => {
  switch (action.type) {
    case START_LOADING:
      return true;
    case STOP_LOADING:
      return false;
    default:
      return state;
  }
};

// 定义 store
const store = createStore(loadingReducer);

在上面的代码中，我们定义了两个 action 类型：START_LOADING 和 STOP_LOADING，并分别定义了对应的 action creator。我们还定义了一个 loadingReducer，用于处理 Loading 状态的改变。最后，我们使用 createStore 函数创建了一个 store 对象。

接下来，我们可以在异步请求数据的代码中使用 dispatch 函数来触发 START_LOADING 和 STOP_LOADING action，从而管理全局的 Loading 状态。下面是一个示例代码：

// javascriptcn.com 代码示例
// 异步请求数据
const fetchData = async () => {
  try {
    // 触发 START_LOADING action
    store.dispatch(startLoading());

    // 发送请求
    const response = await fetch('https://api.example.com/data');

    // 处理响应数据
    const data = await response.json();

    // 触发 STOP_LOADING action
    store.dispatch(stopLoading());

    // 处理数据
    // ...
  } catch (error) {
    // 处理错误
    // ...
  }
};

在上面的代码中，我们在 fetchData 函数中使用 dispatch 函数触发了 START_LOADING 和 STOP_LOADING action。在请求数据时，我们首先触发 START_LOADING action 来显示 Loading 状态，等数据请求成功后再触发 STOP_LOADING action 来隐藏 Loading 状态。

总结

通过使用 Redux 来管理全局的 Loading 状态，我们可以使得异步请求数据时的 Loading 状态变得可预测且易于调试。在实际开发中，我们可以根据具体需求来扩展全局的状态，例如添加全局的错误状态等。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6569258cd2f5e1655d1b424c