reactjs - 如何存储来自 API 的数据，以便可以在其他组件中访问它

Question

我正在用 React.js 和 Wordpress REST API 做一个项目。一直以来，每当组件挂载时，我一直在使用 axios 从 API 获取数据。这意味着每次渲染必须显示一些数据的组件时，我都会发出 API 请求。该项目正在扩大规模，我意识到这种做事方式并不是最好的。

我应该如何处理这个问题？我应该使用 Redux 吗？我认为 Redux 对此有点矫枉过正，因为我不会修改数据，我只会显示它。我应该使用 React Context API 吗？

如果需要任何代码，我会添加。

Answer 1

我认为 redux 是保持项目可扩展性和组织良好的最佳解决方案，但是如果您不想使用它，您可以尝试使用上下文，请记住，这意味着您必须在高级组件中调用您的 api .

这是带有上下文定义的应用程序组件示例:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export const DataContext = React.createContext({})

const App = () => {
  const [apiResponse, setApiResponse] = useState({});

  useEffect(() => {
    axios.get(endPoint).then(response => setApiResponse(response))
  },[]);

  return (
    <DataContext.Provider value={apiResponse}>
      <YourAppContent />
    </DataContext.Provider>
  );
}

export default App

每次需要获取 API 数据时:

import React, { useContext } from 'react';
import Card from './Card';
import { DataContext } from '../App';

const UserCard = () => {
  const data = useContext(DataContext);
  const { user } = data || {};
  return <Card>{user.fullName}</Card>
}

export default UserCard