使用 Redux 和 Axios 获取数据

正如许多开发人员所知，状态管理是您在构建健壮的应用程序时必须处理的众多问题之一。它会很快变成一场噩梦，尤其是在客户端。

Redux 强制执行单向数据流，这使得理解事件如何改变应用程序状态变得容易。伟大的！但是如何处理副作用，例如网络请求，最常见的副作用？

让我们探索 Redux 提供的一些用于获取和更新数据的解决方案，以及如何设置自定义中间件解决方案来满足您的特定需求和您可能遇到的任何副作用。

在本文中：

• 什么是 Redux？

• 从服务器获取数据的简单示例

• 获取和更新数据的各种解决方案

  • 使用 React 状态钩子

  • 使用redux-thunk和redux-promise

  • 使用redux-saga和redux-observable

• 自定义中间件是完美的解决方案吗？

  • 设置中间件

  • 忽略不相关的操作类型

  • 从动作负载中提取重要变量

  • 处理任何 HTTP 方法

  • 处理全局变量

  • 处理加载状态

  • 发出实际的网络请求、处理错误并调用回调

  • 自定义中间件在行动

什么是 Redux？

Redux 是一个状态容器和很好的工具，它解决了 UI 框架的主要问题之一：状态管理。使用 Redux，应用程序状态可以通过称为actions.

Redux 状态管理的可预测质量是，如果actions重放，我们每次都会到达正确的数据状态。

有许多库可以扩展 Redux 在我们应用程序的状态管理方面的功能。但是我们如何判断哪些适合我们的项目呢？

事实是，这些解决方案中的每一个都是根据不同的方法、用例和心智模型构建的，因此它们都有其优点和缺点。在本博客中，我不会讨论所有可能的方法，但让我们通过一个简单的应用程序来看看一些最常见的模式。

为了探索客户端应用程序状态管理的不同选项，我们将使用一个简单的React 应用程序。

从服务器获取数据的简单示例

让我们在我们简单的 React 应用程序中使用一个虚假的 Medium 帖子作为示例。

看看下面的应用程序屏幕截图。你不同意这很简单吗？它只包含一堆文本和左侧的中号拍手图标。您可以获取此应用程序的 GitHub 存储库以进行后续操作。

请注意，中号拍手是可点击的。以下是我构建 Medium clap克隆的方法，以防您感兴趣。

即使对于这个简单的应用程序，您也必须从服务器获取数据。显示所需视图所需的 JSON 有效负载可能如下所示：

{
  "numberOfRecommends": 1900,
  "title": "My First Fake Medium Post",
  "subtitle": "and why it makes no intelligible sense",
  "paragraphs": [
    {
      "text": "This is supposed to be an intelligible post about something intelligible."
    },
    {
      "text": "Uh, sorry there’s nothing here."
    },
    {
      "text": "It’s just a fake post."
    },
    {
      "text": "Love it?"
    },
    {
      "text": "I bet you do!"
    }
  ]
}

该应用程序的结构确实很简单，有两个主要组件：Article和Clap.

在components/Article.js中，article 组件是一个无状态的函数组件，它接收title, subtitle, 和paragraphsprops。渲染的组件如下所示：

const Article = ({ title, subtitle, paragraphs }) => {
  return (
    <StyledArticle>
      <h1>{title}</h1>
      <h4>{subtitle}</h4>
      {paragraphs.map(paragraph => <p>{paragraph.text}</p>)}
    </StyledArticle>
  );
};

这里，是一个通过CSS-in-JS 解决方案StyledArticle设置样式的常规div元素。styled-components

您是否熟悉任何 CSS-in-JS 解决方案都没关系。StyledArticle可以用div通过良好的 ol' CSS 样式替换。

让我们结束它，而不是开始争论。

Medium clap 组件在components/Clap.js. 代码稍微复杂一些，超出了本文的范围。但是，您可以阅读我是如何构建 Medium clap  的——阅读时间为 5 分钟。

有了Clap和Article组件，该App组件就组合了两个组件，如下所示containers/App.js：

class App extends Component {
  state = {};
  render() {
    return (
      <StyledApp>
        <aside>
          <Clap />
        </aside>
        <main>
          <Article />
        </main>
      </StyledApp>
    );
  }
}

同样，您可以StyledApp用常规替换div并通过 CSS 设置样式。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

现在，到本文的重点。

获取和更新数据的各种解决方案

让我们看看您可以选择在 Redux 应用程序中获取和更新数据的一些不同方式，并考虑它们的优缺点。

使用 React 状态钩子

React 提供 Hooks，它充当对 React 功能的速记访问，例如state. 在本节中，我们将专门研究React State Hook。

使用 Hooks，我们可以构建一个组件，该组件可以访问状态等特性，而无需编写类来扩展React.Component和引用this.state

要使用 State Hook，我们useState从 React 库中导入，如下所示：

import {useState} from 'react';

简而言之，