Reactjs 正在使用服务器中的数据初始化React Redux应用程序中的状态

我正在做我的第一个React Redux项目

项目依赖于服务器来获取数据，因此还需要调用服务器API来获取这些数据

我的问题是关于初始化状态

我可以用两种方法来初始化状态：

一,。首先传递一个空对象{}作为Redux存储的初始化状态，然后在componentDidMount内部传递，在那里我调用API访问服务器中的数据，然后更新存储/应用的状态

二,。在Redux应用程序的reducer中，调用所有相关的服务器方法，例如getCategories、getPosts等，然后使用所有数据组成一个对象，例如{categories:categories、posts:posts}，然后将此对象作为初始状态传递给reducer

在处理存储在服务器中的数据时，建议采用哪种方式进行Redux？

---

如果有第三种或第四种方式是重复使用方式或推荐方式，请分享您的知识。谢谢。

我处理来自后端的数据的方式，据我所知也是建议的方式，是这样的：

在componentDidMount方法中，调用thunk动作创建者。您可以在链接中阅读更多关于它们的信息

在thunk action creator中，您首先调度一个请求操作，然后执行一个获取来访问后端，当响应到达时，您可以在成功或错误处理程序上处理它。根据执行的处理程序，您可以分派成功或错误操作，并将来自后端的所有相关信息附加到该操作，以便reducer可以访问它

在reducer中，您编写代码来处理上述所有操作请求、成功和错误。每个处理程序都将转换您的状态，例如，请求可以将isFetching标志设置为true，这将允许您在UI中显示微调器，成功的处理程序可以将该标志设置为false，并使用来自后端的数据填充状态，并使用已调度的操作将其传递给减速器

一旦您的reducer被更新，您将从UI访问更新的状态，例如使用connect react redux函数

关于初始状态，它应该表示默认状态。例如，它的isFetching标志为false，如果您从后端获取食物列表，那么该列表在初始状态下可能是空列表。当然，这只是一个例子。您需要设置对应用程序有意义的初始状态

---

我希望这对您有所帮助。

我处理来自后端的数据的方式，据我所知也是建议的方式，是这样的：

在componentDidMount方法中，调用thunk动作创建者。您可以在链接中阅读更多关于它们的信息

在thunk action creator中，您首先调度一个请求操作，然后执行一个获取来访问后端，当响应到达时，您可以在成功或错误处理程序上处理它。根据执行的处理程序，您可以分派成功或错误操作，并将来自后端的所有相关信息附加到该操作，以便reducer可以访问它

在reducer中，您编写代码来处理上述所有操作请求、成功和错误。每个处理程序都将转换您的状态，例如，请求可以将isFetching标志设置为true，这将允许您在UI中显示微调器，成功的处理程序可以将该标志设置为false，并使用来自后端的数据填充状态，并使用已调度的操作将其传递给减速器

一旦您的reducer被更新，您将从UI访问更新的状态，例如使用connect react redux函数

关于初始状态，它应该表示默认状态。例如，它的isFetching标志为false，如果您从后端获取食物列表，那么该列表在初始状态下可能是空列表。当然，这只是一个例子。您需要设置对应用程序有意义的初始状态

---

我希望这对您有所帮助。

第一种方法是更好的初始化状态的方法。您的组件在componentDidMount中进行必要的API调用，并将数据作为操作的有效负载传递给Redux，还原程序使用这些操作来更新应用程序的状态

第二种方法是不可取的。根据Redux：

reducer是一个纯函数，它接受前一个状态和一个操作，并返回下一个状态

previousState，action=>newState

。。。 减速机保持纯净是非常重要的。在减速器内不应执行的操作：

改变其论点； 执行API调用和路由转换等副作用； 调用非纯函数，例如Date.now或Math.random。 编辑： 您还可以使用thunk中间件和异步操作进行API调用，如Redux和@Dieg中所述

---

oTArg的答案。

第一种方法是初始化状态的更好方法。您的组件在componentDidMount中进行必要的API调用，并将数据作为操作的有效负载传递给Redux，还原程序使用这些操作来更新应用程序的状态

第二种方法是不可取的。根据Redux：

reducer是一个纯函数，它接受前一个状态和一个操作，并返回下一个状态

previousState，action=>newState

。。。 减速机保持纯净是非常重要的。在减速器内不应执行的操作：

改变其论点； 执行API调用和路由转换等副作用； 调用非纯函数，例如Date.now或Math.random。 编辑：

---

您还可以使用thunk中间件和异步操作来执行API调用，如Redux和@Diegatag的回答中所述。

我建议使用第1种方法，因为您可以处理错误并相应地向用户显示特定错误。您可以使用“componentWillMount”而不是“componentDidMount”，我建议使用第1种方法，因为您可以处理错误并相应地向用户显示特定错误。您可以使用“componentWillMount”代替“componentDidMount”