Redux 数据流实战：如何优雅的处理前端缓存-JavaScript中文网-JavaScript教程资源分享门户

在实际的前端开发过程中，我们经常需要处理各种缓存问题，比如请求数据的时候如果本地缓存有数据就直接使用本地缓存，减轻后端的压力；或者将一些常用的静态数据缓存到本地，提高用户体验等等。Redux 作为一个状态管理工具，在前端缓存处理方面也可以发挥重要作用。本文将基于一个具体的案例，介绍如何使用 Redux 合理地处理前端缓存问题。

问题背景

假设我们正在开发一个在线购物网站，其中有一个“热卖商品”栏目，需要从后端 API 中获取热卖商品的信息。由于热卖商品在一段时间内不会发生太大变化，我们希望在用户第一次访问页面的时候从后端获取信息，之后就可以从本地缓存中获取信息，减轻后端的压力，并且提高用户体验。那么我们该如何实现呢？

解决方案

步骤一：设计 reducer 和 action

首先，我们需要设置一个 reducer 来处理热卖商品的状态。在 reducers.js 中添加如下代码：

// javascriptcn.com 代码示例
const initState = {
  loading: false,
  hotItems: [],
};

const hotItemsReducer = (state = initState, action) => {
  switch (action.type) {
    case "FETCH_HOT_ITEMS_START":
      return { ...state, loading: true };
    case "FETCH_HOT_ITEMS_SUCCESS":
      return { ...state, loading: false, hotItems: action.payload };
    default:
      return state;
  }
};

export default hotItemsReducer;

这个 reducer 处理了两个 action，分别是 FETCH_HOT_ITEMS_START 和 FETCH_HOT_ITEMS_SUCCESS。它们的作用分别是开始请求数据和请求数据成功后存储数据。其中，hotItems 是我们需要存储的热卖商品信息，loading 负责记录数据是否正在请求中。

接下来，在 actions.js 中添加如下代码：

export const fetchHotItemsStart = () => ({
  type: "FETCH_HOT_ITEMS_START",
});

export const fetchHotItemsSuccess = (hotItems) => ({
  type: "FETCH_HOT_ITEMS_SUCCESS",
  payload: hotItems,
});

这里我们只需要创建两个 action，分别是 FETCH_HOT_ITEMS_START 和 FETCH_HOT_ITEMS_SUCCESS，对应上述 reducer 中的两个 action。

步骤二：在组件中 dispatch action

现在我们需要在组件中使用上述 action 来请求数据。在 HotItems.js 中添加如下代码：

// javascriptcn.com 代码示例
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { fetchHotItemsStart } from "../actions";

const HotItems = ({ hotItems, loading, fetchHotItems }) => {
  useEffect(() => {
    fetchHotItems();
  }, []);

  return (
    <div>
      <h2>热卖商品</h2>
      {loading ? (
        <p>正在加载...</p>
      ) : (
        hotItems.map((item) => <div key={item.id}>{item.name}</div>)
      )}
    </div>
  );
};

const mapStateToProps = (state) => ({
  hotItems: state.hotItems.hotItems,
  loading: state.hotItems.loading,
});

const mapDispatchToProps = (dispatch) => ({
  fetchHotItems: () => dispatch(fetchHotItemsStart()),
});

export default connect(mapStateToProps, mapDispatchToProps)(HotItems);

这里我们使用了 React Hooks 中的 useEffect 来在组件渲染时自动调用 fetchHotItems，从后端获取热卖商品信息。mapStateToProps 和 mapDispatchToProps 分别将 Redux 中的状态和 action 映射到组件的 props 中。

步骤三：添加缓存逻辑

现在我们已经能够从后端获取热卖商品信息了，接下来需要处理缓存逻辑。在 actions.js 中添加如下代码：

// javascriptcn.com 代码示例
export const fetchHotItems = () => {
  return (dispatch, getState) => {
    const hotItems = getState().hotItems.hotItems;
    if (hotItems.length > 0) {
      console.log("从缓存中获取数据");
      return;
    }

    console.log("从后端获取数据");
    dispatch(fetchHotItemsStart());

    // 这里使用 fetch API 从后端获取数据
    fetch("/api/hotItems")
      .then((response) => response.json())
      .then((hotItems) => {
        dispatch(fetchHotItemsSuccess(hotItems));
      });
  };
};

这里我们通过 Redux 中的 getState 方法来获取 hotItems，如果 hotItems 不为空，就直接使用缓存数据。否则，从后端获取热卖商品信息，并将其存储到 Redux 中。

步骤四：运行程序

最后，我们使用 npm start 命令启动程序，并从浏览器中访问 http://localhost:3000。如果 hotItems 不为空，页面应该会显示“从缓存中获取数据”；否则，页面应该会显示“从后端获取数据”。

至此，我们已经成功地使用 Redux 实现了一个简单的前端缓存功能。这种方式可以大大减轻后端服务器的压力，加快页面加载速度，提高用户体验。当然，实际的前端缓存问题还有很多细节需要处理，这篇文章只是一个简单的入门教程。希望对读者在处理前端缓存问题时有所帮助。

总结

本文主要介绍了如何使用 Redux 处理前端缓存问题。我们通过一个具体的案例来演示了如何在 reducer 和 action 中添加相应代码，以及如何在组件中 dispatch action 来请求数据。最后，我们使用 getState 方法来实现简单的缓存逻辑。这种方式可以使我们在前端开发中更加灵活地处理缓存问题，提高程序性能、用户体验。

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