使用 Redux 获取数据答案

【问题标题】：Fetching data with Redux使用 Redux 获取数据
【发布时间】：2017-06-19 07:45:22
【问题描述】：

与仅使用常规模式相比，使用 here 描述的 Redux 获取数据有哪些优势

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

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

  render() {
    return ... 
  }
}

是否让异步获取更容易？是否可以更轻松地将数据持久保存在商店中，以便在我重新打开应用程序时可以检索它而无需再次获取？

【问题讨论】：

我想你可能想阅读Motivation behind Redux
Redux 的 FAQ 中也有一些值得思考的地方：Do I have to put all my state into Redux? Should I ever use React's setState() ?
您的问题不是更多地是关于使用 Redux 的优势而不是关于使用 Redux 获取数据的问题吗？因为如果您对组件以您演示的方式保存数据感到满意，那么您一开始就没有必要使用 Redux。但如果你不是，例如，如果你想避免再次获取相同的数据，你可能想使用 Redux，你提到的模式是当你需要处理异步调用时的一种方法。
另外，Dan Abramov 关于异步逻辑如何适合 Redux 应用程序的解释，stackoverflow.com/questions/35411423/… 和 stackoverflow.com/questions/34570758/…。

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

其实这不是为什么要从异步操作中获取数据的问题，看来你需要了解 Redux 库作为一个整体带来了什么优势。

阅读 Redux 库作者的文章，不管你是否真的需要 Redux，或者它带来了什么好处：https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

【讨论】：

【解决方案2】：

使用 Redux 获取数据不一定有优势，但在使用 Redux 获取数据时知道发生了什么更有优势。

几乎总是完全相同的流程。

我们将在屏幕上渲染一个组件。例如您的 Posts 或 PostList 组件，它们需要从 json api 获取帖子列表才能正确显示。因此，我将在一个类上定义一个 componentDidMount() 方法。这就是为什么我将 PostList 创建为基于类的组件，以确保我可以访问生命周期方法。
在componentDidMount() 生命周期方法中，我们将放置一个动作创建者。因此，只要我们的组件出现在屏幕上，动作创建器就会被自动调用。
动作创建者将在内部包含一些代码，这些代码将使用 axios 或 fetch，但在我的情况下，我更喜欢 axios，将 API 请求发送到 json api。
发出请求后，api 会响应一些数据。一旦我们取回数据，
我们的动作创建者将做它应该做的事情，即返回一个动作，并且动作对象将在有效负载属性上获取数据。我们将从动作创建者返回动作，并且 dispatch 方法将调度该动作并将其发送到我们应用程序内的所有不同减速器。我们将有一些特殊配置的减速器，它将监视我们给它的任何类型的动作。 reducer 将看到该操作，从有效负载属性中提取数据。
reducer 将运行并生成一个新的状态对象，并将其发送到应用程序的反应端。这将导致我们应用程序的反应端使用我们返回的 json api 数据重新渲染。我们可以使用mapStateToProps() 来获取该json api 数据，可以说它是一个帖子列表。我们将其从全局状态对象中取出并放入我们的组件中。

关于每个步骤的一些注释。

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

还有一些其他地方可以调用动作创建者来获取数据，但这涉及到这里没有提到的其他库。最常见的地方是componentDidMount() 生命周期方法。

关于动作创建者，我们通常会确保动作创建者负责发出我们的 API 请求。在某些情况下，您可能会将一些将为我们执行实际请求的外部类或服务放在一起，但通常它是操作创建者，它将执行 api 数据的初始获取。进入舞台左侧是 Redux-Thunk。

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

【讨论】：