Javascript 使用Redux获取数据

与仅使用规则模式获取数据相比，使用上述Redux获取数据有哪些优势

class Posts extends Component {
  state = { posts: [] };

  componentDidMount() {
    fetch(url).then(res => this.setState({ posts: res.json().posts });
  }

  render() {
    return ... 
  }
}

---

它是为了使异步获取更容易吗？是否可以更容易地将数据持久保存在存储中，以便我可以在重新打开应用程序时检索数据，而无需再次提取？

实际上，这不是为什么要从异步操作中提取数据的问题，似乎您需要了解Redux库作为一个整体带来的好处

---

阅读Redux库作者的文章，不管您是否真的需要Redux，或者它带来了什么好处：

使用Redux获取数据不一定有好处，但更重要的是知道使用Redux获取数据时发生了什么

几乎总是一样的流量

我们将在屏幕上渲染一个组件。例如，您的

Posts

或

PostList

组件需要从json api获取一个Posts列表，以便正确显示自己。因此，我将在类上定义一个

componentDidMount（）

方法。这就是为什么我创建PostList作为一个基于类的组件，以确保我可以访问生命周期方法

在

componentDidMount（）

生命周期方法中，我们将放置一个动作创建者。因此，只要我们的组件出现在屏幕上，就会自动调用action creator

action creator将在其中包含一些使用axios或fetch的代码，但在我的例子中，我更喜欢axios，以便将API请求传递给json API

请求发出后，api将使用一些数据进行响应。一旦我们得到数据

我们的action creator将做它应该做的事情，即返回一个action，action对象将在payload属性上获取数据。我们将从动作创建者返回动作，分派方法将分派该动作，并将其发送到应用程序中的所有不同还原程序。我们将有一些特殊配置的减速器，它将监视我们给出的任何类型的动作。减速器将看到动作，从有效负载属性中提取数据

reducer将运行并生成一个新的state对象，它将被发送到应用程序的react端。这将导致应用程序的react端使用我们得到的json api数据重新呈现。我们可以使用

mapStateToProps（）

获取json api数据，比如说它是一个帖子列表。我们把它从全局状态对象中取出，放到我们的组件中

每个步骤都有一些注释

将动作创建者放入

组件didmount（）

生命周期方法是一种常见做法。我们希望通过通常在生命周期方法中调用动作创建者来确保组件本身负责它们所需的数据

在其他一些地方，您可以调用action creator来获取数据，但这涉及到此处未提及的其他库。最常见的是

componentDidMount（）

lifecycle方法

关于动作创建者，我们通常会确保动作创建者负责提出我们的API请求。在某些情况下，您可能会组合一些外部类或服务来为我们执行实际请求，但通常是由action creator执行api数据的初始获取。进入舞台的左边是雷德克斯·图恩

---

最后一件事，当您获取数据并将其放入组件时，您总是使用mapStateToProps函数从redux存储中获取数据并将其放入组件。

我想您可能需要阅读redux的常见问题解答中还有一些值得思考的地方：您的问题不是更多地是关于使用redux的优势，而不是关于使用redux获取数据的优势吗？因为如果您对以演示方式保存数据的组件没有问题，那么首先就不需要使用Redux。但如果你不是，例如，如果你想像你说的那样避免再次获取相同的数据，你可能会想使用Redux，而你提到的模式是当你需要处理异步调用时的一种方法。Dan Abramov关于异步逻辑如何适应Redux应用程序的解释也与此相关。